Вопрос или проблема
Я создаю еще один веб-сайт, и фон – это акварельная живопись. Я хотел сделать так, чтобы за каждой кнопкой навигации было изображение акварельной капли. Я пытался решить эту задачу, но ничего не сработало. Вот моя текущая попытка, но пока ничего из того, что я пробовал, не сработало:
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: right;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul {}
.nav-links ul li a {
color: black;
text-decoration: none;
cursor: pointer;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
background-image: url(https://assets.onecompiler.app/42tzva7s5/42wnuqh5j/water%20drop.png);
background-position: relative;
}<nav>
<div class="nav-links">
<ul>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
</ul>
</div>
</nav></div><div class="s-prose js-post-body" itemprop="text">Попробуйте этот CSS:
nav {
display: flex;
padding: 2% 6%;
justify-content: flex-end;
align-items: center;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul {
padding: 0;
margin: 0;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: black;
text-decoration: none;
cursor: pointer;
position: relative;
/* Требуется для псевдоэлемента */
z-index: 1;
/* Убедитесь, что текст ссылки сверху */
}
/* Добавьте псевдоэлемент для фона в акварельном стиле */
.nav-links ul li::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('https://assets.onecompiler.app/42tzva7s5/42wnuqh5j/water%20drop.png');
background-size: contain;
/* Настройте по мере необходимости */
background-repeat: no-repeat;
z-index: 0;
/* Убедитесь, что это под текстом ссылки */
}<nav>
<div class="nav-links">
<ul>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
</ul>
</div>
</nav>Использование псевдоэлемента (::before в данном случае) – это хороший способ добавления пользовательских элементов к каждому элементу списка или каждому дочернему div
Это свойство должно работать в любом элементе. Похоже, единственное, что отсутствует — это URL в кавычках.
background-image: url("https://assets.onecompiler.app/42tzva7s5/42wnuqh5j/water%20drop.png");
Я надеюсь, что следующий фрагмент кода является желаемым результатом. Возможно, вы захотите изменить свойство background-size на cover или contain, в зависимости от ваших предпочтений. Этот фрагмент использует contain.
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: right;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li a{
color: black;
text-decoration: none;
cursor: pointer;
}
li{
list-style: none;
display: inline-block;
padding: 8px 12px;
background-image: url(https://assets.onecompiler.app/42tzva7s5/42wnuqh5j/water%20drop.png);
background-size: contain; /* вы можете также изменить это на cover */
background-position: center;
background-repeat: no-repeat;
} <nav>
<div class="nav-links">
<ul>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
</ul>
</div>
</nav>.
Ответ или решение
Добавление фона изображения к каждому элементу списка
При создании веб-сайтов часто возникает необходимость стилизовать элементы интерфейса, чтобы обеспечить им уникальный и привлекательный вид. В вашем случае вы хотите добавить изображение водяного цвета в качестве фона для каждого элемента навигационного списка. Давайте разберем, как это можно сделать эффективно с помощью CSS.
Шаг 1: Основная структура навигации
Первым делом, обеспечим основную структуру навигационного меню. Вот пример, как она может выглядеть:
<nav>
<div class="nav-links">
<ul>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
<li><a href="">LORUM</a></li>
</ul>
</div>
</nav>Шаг 2: Стилизация с помощью CSS
Основная задача заключается в том, чтобы добавить фон к каждому элементу списка. Мы можем использовать псевдоэлемент ::before для создания уникального фона для каждого элемента списка. Вот как можно это реализовать:
nav {
display: flex;
padding: 2% 6%;
justify-content: flex-end; /* Для выравнивания элементов навигации вправо */
align-items: center;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul {
padding: 0;
margin: 0;
list-style: none; /* Убираем маркеры списка */
}
.nav-links ul li {
display: inline-block; /* Элементы будут располагаться в строку */
position: relative; /* Необходим для позиционирования псевдоэлемента */
padding: 8px 12px; /* Обеспечиваем отступы */
}
/* Стили для ссылок */
.nav-links ul li a {
color: black; /* Цвет текста */
text-decoration: none; /* Убираем подчеркивание */
position: relative; /* Обеспечиваем корректное отображение */
z-index: 1; /* Выносим ссылку на передний план */
}
/* Псевдоэлемент для фона */
.nav-links ul li::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('https://assets.onecompiler.app/42tzva7s5/42wnuqh5j/water%20drop.png');
background-size: contain; /* Используйте 'cover', если хотите заполнить элемент */
background-repeat: no-repeat; /* Изображение не будет повторяться */
z-index: 0; /* Помещаем фон за текстом */
}Шаг 3: Пояснения
-
Псевдоэлемент
::before: Использование псевдоэлемента позволяет добавлять визуальные элементы перед содержимым элемента. В данном случае мы используем его для фона. -
Позиционирование: Важно, чтобы у родительского элемента (
li) было заданоposition: relative;, что позволяет правильно позиционировать псевдоэлемент. -
Фон: Вы можете поэкспериментировать с свойством
background-size. Если выбратьcontain, изображение сохранит свои пропорции, но может не заполнить весь элемент. Использованиеcoverзаставит изображение заполнить весь элемент, скрывая его часть, если соотношение сторон не совпадает. -
Элементы управления: С помощью свойства
z-indexможно контролировать порядок отображения слоев. Убедитесь, что текст ссылки всегда отображается поверх фонового изображения.
Заключение
Теперь вы знаете, как добавить фоновое изображение к каждому элементу списка в навигации с помощью CSS. Это достигается с помощью псевдоэлемента и правильного позиционирования, что создает красивый и современный интерфейс. Не забывайте тестировать внешний вид на различных устройствах, чтобы убедиться, что дизайн выглядит хорошо на всех экранах.