Смена цвета фона элемента CSS/JS
У меня есть строка меню, которая изначально прозрачная, но если пользователь начинает листать сайт, то она меняет цвет. Меняю цвет я с помощью удаления и добавления класса с прописанным цветом (это важно и этого я изменить не могу) Но цвет меняется резко. Можно ли сделать плавный переход от прозрачного цвета фона к цвету фона прописанному классу, который я добавляю элементу. Возможно, можно как-то «плавно добавлять класс» через JS? Код JS
var windowTop = $(window).scrollTop(); windowTop > 75 ? $('#mainhead').addClass('navShadow') : $('#mainhead').removeClass('navShadow'); nav < background: transparent; -webkit-transition: all 0.3s; transition: all 0.3s; >nav.navShadow
Отслеживать
задан 15 апр 2020 в 11:48
35 5 5 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Пишут , что градиенты не поддерживают transition , поэтому предлагается вариант, в котором у псевдоэлемента с градиентным фоном плавно меняется прозрачность:
$(document).ready(function() < $(window).on('scroll', function() < var windowTop = $(window).scrollTop(); $('#mainhead').toggleClass('navShadow', windowTop >75); >); >);#mainhead < height:20px; width: 100%; position: fixed; overflow: hidden; color: #f00; top: 0; left: 0; >#mainnav::after < content: ''; background: linear-gradient(to right, rgba(0,0,0,1), rgba(255,255,255,1)); opacity: 0; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; transition: all 0.3s ease; >.navShadow #mainnav::after
Отслеживать
ответ дан 15 апр 2020 в 12:14
4,379 4 4 золотых знака 17 17 серебряных знаков 29 29 бронзовых знаков
градиентный фон можно двигать, иногда этим можно обойтись
15 апр 2020 в 12:45
@br3t Сейчас сделал такой код. Он почему-то не показывает должного перехода. Добавил код в вопросе
15 апр 2020 в 12:53
@StrangerintheQ Я говорю о том, что я сделал такой код и он всё равно не работает
15 апр 2020 в 13:01
@Дмитрий ваша верстка не соответствует вашим стилям. Если вы даете navShadow элементу nav , то у вас не может быть такого селектора .navShadow nav
Цвет фона
Управляйте цветом фона элемента с помощью утилит bg- .
Сохранить изменения
button class="bg-indigo-500 . "> Сохранить изменения button>Изменение непрозрачности
Управляйте непрозрачностью цвета фона элемента с помощью модификатора непрозрачности цвета.
button class="bg-sky-500/100 . ">button> button class="bg-sky-500/75 . ">button> button class="bg-sky-500/50 . ">button>Вы можете использовать любое значение, определенное в вашей шкале непрозрачности, или использовать произвольные значения, если вам нужно отклониться от маркеров вашего дизайна.
div class="bg-sky-500/[.06] . ">div>Применяя условно
Наведение, фокус и другие состояния
Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : bg-cyan-600 , чтобы применять утилиту bg-cyan-600 только при hover .
Попробуйте навести курсор на кнопку, чтобы увидеть изменение цвета фона
Подписаться
button class="bg-cyan-500 hover:bg-cyan-600 . ">Подписатьсяbutton>Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.
Контрольные точки и медиа-запросы
Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: bg-green-500 , чтобы применить утилиту bg-green-500 только на экранах среднего размера и выше.
button class="bg-blue-500 md:bg-green-500 . ">Подписатьсяbutton>Использование пользовательских значений
Настройка вашей темы
По умолчанию Tailwind делает всю цветовую палитру по умолчанию доступной в виде цветов background . Вы можете настроить свою цветовую палитру, отредактировав theme.colors или theme.extend.colors в файле tailwind.config.js .
tailwind.config.js
module.exports = theme: extend: colors: 'regal-blue': '#243c5a', >, > > > Кроме того, вы можете настроить только цвета background , отредактировав theme. backgroundColor или theme.extend. backgroundColor в своем файле tailwind.config.js .
Узнайте больше о настройке темы по умолчанию в документации по кастомизации темы.
Произвольные значения
Если вам нужно использовать одноразовое color value , которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.
p class="bg-[#50d71e]"> p> Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.
Copyright © 2023 Tailwind Labs Inc.
HTML/CSS. Как изменить цвет фона
Эта видео инструкция продемонстрирует, как изменить цвет фона в шаблоне сайта. Внеся изменения в HTML и CSS файлы вы можете заменить фон сайта на подходящий для вашего проекта.
1) Откройте файл index. HTML из папки «site» в вашем браузере.
2) Вы можете узнать, какая из сторок CSS задает фон в шаблоне при помощи Firebug, бесплатного приложения для Firefox.
3) Сделайте правый клик на фоне и выберите «Inspect Element».
4) Цвет фона может быть изменен в файле style.css. Нужная строка файла может быть определена при помощи Firebug.
5) Давайте откроем этот файл из папки «Site» с помощью приложения Adobe Dreamweaver.
6) Перейдите к нужной строке и измените ID цвета на подходящий вам. Вы можете выбрать цвет из списка предлагаемого Dreamweaver.
7) Сохраните изменения внесенные в файл и откройте index. HTML в браузере, что бы увидеть внесенные изменения.
Посмотрите детальную видео инструкцию:
Эта запись была размещена в Работа с CSS, Работа с HTML и помечена как background, color, css, HTML. Добавьте в закладки постоянную ссылку.