Яркость фона — Tailwind CSS
Основы использования
Регулировка яркости фона
Используйте утилиты backdrop-brightness-{amount?} для управления яркостью фона элемента.
<div> <!-- ... --> </div> <div> <!-- ... --> </div> <div> <!-- ... --> </div>
Удаление фильтров фона
Чтобы удалить сразу все фоновые фильтры для элемента, используйте утилиту backdrop-filter-none:
<div> <!-- ... --> </div>
Это может быть полезно, когда вы хотите условно удалить фоновые фильтры, например, при наведении или в определенной контрольной точке.
Применяя условно
Наведение, фокус и другие состояния
Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:backdrop-brightness-150, чтобы применять утилиту backdrop-brightness-150 только при hover.
<div> <!-- ... --> </div>
Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.
Контрольные точки и медиа-запросы
Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:backdrop-brightness-150, чтобы применить утилиту backdrop-brightness-150 только на экранах среднего размера и выше.
<div> <!-- ... --> </div>
Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.
Использование пользовательских значений
Настройка вашей темы
По умолчанию Tailwind включает в себя несколько утилит общего назначения backdrop-brightness.
theme.backdropBrightness или theme.extend.backdropBrightness в вашем файле tailwind.config.js.tailwind.config.js
module.exports = {
theme: {
extend: {
backdropBrightness: {
25: '.25',
175: '1.75',
}
}
}
}
Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.
Произвольные значения
Если вам нужно использовать одноразовое backdrop-brightness value, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.
<div> <!-- ... --> </div>
Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.
Свойство CSS Background — Темы масштабирования
Обзор
Свойство CSS background
Это сокращенное свойство, которое позволяет указать различные стили фона элемента, такие как цвет, размер, изображение, происхождение и повторение.Существует множество сценариев, когда мы хотим добавить изображение к фону нашего элемента или цвет/градиент фона к нашему элементу.
Допустим, у вас есть два HTML-элемента div и вы хотите добавить к ним фоновое изображение или градиент.
Вывод нашего приведенного выше кода выглядит как приведенный ниже пример, где первый элемент содержит изображение на фоне, а второй элемент включает градиент красного и синего цветов.
Это единственные 3 свойства, которые используются в приведенном выше примере, но сокращенное свойство background состоит из восьми других подсвойств:
- background-attachment
- фон-клип
- цвет фона
- фоновое изображение
- фон-происхождение
- фоновая позиция
- повтор фона
- размер фона
У вас есть свобода использовать их как одно свойство, но фоновое сокращение дает вам возможность использовать их одновременно, и вы даже можете оставить свойства, которые вы не хотите использовать.
Синтаксис
Основной синтаксис свойства background заключается в том, что оно принимает все значения в одном свойстве, но мы можем изменить его в соответствии с нашими потребностями.
Таким образом, мы можем легко избежать других значений, не указывая их, когда нам нужны размер и цвет. То же самое мы можем сделать с комбинацией всех других подсвойств.
Когда мы хотим добавить желтый цвет к фону контейнера, мы можем сделать это следующим образом:
Вышеприведенный код только добавляет желтый цвет к фону контейнера.
И это одна из самых простых вещей, которые мы можем сделать с помощью свойства фона.
Допустим, у вас есть изображение с высотой и шириной 50 пикселей, а размер вашего контейнера составляет 500 пикселей в высоту и ширину, и вы не хотите повторять изображение внутри контейнера.
На изображении ниже видно, что изображение не повторяется в контейнере.
Но что, если мы хотим, чтобы изображение повторялось по оси X? Затем вам нужно заменить no-repeat на Repeat-x.
Теперь вы можете видеть, что изображение повторяется по оси x.
Девиз приведенных выше примеров — доказать, что вы можете гибко использовать фоновую стенографию в соответствии с вашими потребностями. Например, вы можете использовать цвет с изображением или изображение с размером.
Ниже приведены примеры изменения свойства фона:
Фон в CSS
Свойство Фон CSS используется для определения различных стилей фона элемента. Это сокращенное свойство, которое одновременно устанавливает все свойства стиля фона, такие как цвет, размер, происхождение, изображение и размер.
Составляющие свойства
Фон CSS — это сокращение, которое принимает значения 8 составных свойств. Теперь поговорим о каждом из них подробно с примерами.
1. background-attachment :
Свойство background-attachment определяет присоединение фонового изображения к его контейнеру или области просмотра.
Это свойство позволяет нам контролировать содержимое и поведение изображения при прокрутке страницы.
Требуется три значения , такие как прокрутка, фиксированное и локальное. Прокрутка
Лучший способ объяснить свойство background-attachment — это демонстрация.
Приведенные выше три значения свойства background-attachment создают эффект, который вы видите на изображении ниже.
Вы можете видеть, что первое значение — это прокрутка, которая является поведением по умолчанию для свойства background-attachment. Второе значение является фиксированным, что означает, что фоновое изображение будет зафиксировано на своем месте.
И третье значение — локальное, которое используется для фиксирования изображения относительно содержимого элемента, что означает, что если у фона есть механизм прокрутки, то фоновое изображение будет прокручиваться вместе с содержимым элемента.
2. background-clip :
Свойство background-clip устанавливает фон элемента независимо от того, распространяется ли он на рамку, отступы или содержимое. Требуется три значения padding-box, content-box и border-box.
Определяет, расширяет ли изображение поле содержимого или нет, то же самое с другими значениями.
- border-box :
это значение свойства background-clip по умолчанию, означающее, что фон простирается до краев элемента. - padding-box :
это значение обрезает фоновое изображение по отступу и не допускает экстента до границы. - content-box :
это значение обрезает фоновое изображение только до края блока содержимого.
В приведенном ниже коде указаны все три значения:
Вы можете увидеть результат выполнения приведенного выше кода на изображении ниже, где у нас есть три контейнера с фоновым изображением.
Значение background-clip первого контейнера — это border-box, которое является значением свойства по умолчанию, поскольку это изображение простирается до края элемента.
Второе значение — padding-box, что означает, что фоновое изображение распространяется только на пространство заполнения и не доходит до границы; вы можете видеть это на изображении ниже.
Третье значение — поле содержимого, которое указывает фоновому изображению оставаться под полем содержимого и не доходить до границы элемента.
3. background-color :
Свойство background-color используется для установки цвета фона элемента. Он поддерживает все значения цвета, такие как шестнадцатеричный код, значения RGB, RGB, HSL и HSLA.
Допустим, мы хотим добавить зеленый цвет к фону нашего элемента.
Вы можете увидеть зеленый цвет фона контейнера на изображении ниже.
Даже мы можем использовать значения RGBA, шестнадцатеричный код и значения HSL вместо названия цвета.
4. background-image :
Свойство CSS background-image используется для установки изображений или градиентов фона элемента. По умолчанию он помещается в верхний левый угол контейнера.
С помощью CSS можно включить два типа изображений: обычное изображение или градиент.
Изображение :
Вы можете легко добавить обычное изображение на фон элемента. С помощью синтаксиса URL() мы можем легко добавить фоновое изображение.
Обратите внимание на повторяющееся изображение в приведенном ниже примере.
Если вам нужно более двух изображений, вы можете сделать это, добавив больше url() с помощью запятой (,).
Первое изображение размещается поверх второго изображения, и ко всем изображениям применяется одно и то же правило.
Градиент :
Мы также можем использовать свойство background-image для добавления любого градиента к фону элемента.
Вы можете увидеть вывод вышеприведенного кода в приведенном ниже примере.
5. background-origin :
Это свойство позволяет нам установить происхождение нашего изображения в блочной модели CSS. он принимает три значения: border-box, content-box и padding-box.
Работает так же, как свойство background-clip, но основное отличие состоит в том, что background-clip обрезает изображение, чтобы оно поместилось внутри блока, а background-origin вставляет содержимое внутрь блока, чтобы оно поместилось.
6. background-position :
Это свойство позволяет нам перемещать изображения или градиенты по оси X или оси Y относительно их контейнера. Это свойство принимает значения в процентах и длине.
Вы также можете использовать ключевые слова, такие как верх и низ, что соответствует положительному или отрицательному по оси Y, и левому, правому, что равняется положительному или отрицательному по оси X.
Центр значения ключевого слова центрирует изображение.
7. background-repeat :
Свойство background-repeat используется для определения того, повторяется или нет фоновое изображение вдоль горизонтальной и вертикальной осей.
У вас есть такие значения, как повтор, повтор-x, повтор-y и повтор-и. Значение повтора означает, что фоновое изображение повторяется по обеим осям. repat-y означает, что фоновое изображение повторяется только по оси Y. repat-x означает, что фоновое изображение повторяется только по оси x. И отсутствие повторения говорит о том, что изображение не повторяется.
Вывод приведенного выше кода выглядит так, как показано на рисунке ниже.
8. Background-size :
Это свойство используется для определения background-size , которое является наиболее важным и запутанным свойством, поскольку оно имеет множество вариаций для различных вариантов использования. Он поддерживает ключевые слова, такие как обложка и содержит.
С другой стороны, он также поддерживает значения длины.
Оба значения ключевого слова:
Обложка:
это означает, что фоновое изображение всегда должно покрывать весь контейнер, даже если изображение нужно растянуть или обрезать.
Содержит :
это означает, что изображение всегда будет отображаться целиком, без растягивания или даже если останется пустое место.
Он также поддерживает значения длины с синтаксисом с одним значением и синтаксисом с двумя значениями.
Указание одного значения, например 100 пикселей, применяется как к высоте, так и к ширине, а когда мы указываем два значения, первое значение всегда применяется к ширине, а второе значение — к высоте.
Примеры
Настройка фона с помощью цвета Ключевые слова
Настройка цвета фона довольно проста, и вам просто нужно использовать свойство фона CSS с указанным значением цвета (это может быть имя цвета, шестнадцатеричный код, RGB или hsla).
Он поддерживает все значения цвета.
Допустим, у нас есть HTML-элемент div, и мы хотим применить золотой цвет к его фону.
Когда приведенный выше код применяется к элементу div, он выглядит так, как показано на рисунке ниже.
Настройка фона с изображениями
Существует множество сценариев, когда мы хотим добавить фоновое изображение к нашему элементу, и именно здесь пригодится свойство background, поскольку оно также принимает значения изображения.
Для добавления фонового изображения необходимо использовать синтаксис URL и изображение.
Приведенный выше код добавляет изображение собаки в наш контейнер, и это выглядит как пример ниже.
Установка нескольких фонов
В спецификацию CSS3 добавлена поддержка нескольких фонов, наложенных друг на друга. Свойство background имеет один или несколько слоев фона. Чтобы добавить несколько фонов, вы должны использовать список изображений или градиентов, разделенных запятыми.
Когда мы добавляем несколько фонов с помощью списка, разделенного запятыми, первое значение — это верхний слой, второе значение — это второй слой, а цвет фона всегда является последним слоем.
В приведенном выше коде мы добавляем два фоновых изображения с помощью одного свойства фона, доказывая, что мы можем легко добавить несколько фонов в свойство фона CSS.
Первое изображение всегда размещается на верхнем слое, а второе — на втором; это относится ко всем изображениям. Это связано с тем, что по умолчанию второе изображение повторяется, а первое изображение не повторяется. И вы видите, что первое изображение сложено со вторым изображением.
Проблемы доступности
Браузеры не предоставляют вспомогательным технологиям никакой конкретной информации о фоновых изображениях. Это особенно важно для программ чтения с экрана, так как программа чтения с экрана не объявляет о своем присутствии и ничего не сообщает своим пользователям. Если изображение содержит информацию, важную для понимания общей цели страницы, более разумно описать ее семантически в документе.
Поддержка браузера
Вам не нужно беспокоиться о свойстве фона CSS, поскольку оно поддерживает все современные браузеры, такие как:
- Гугл Хром,
- Internet Explorer,
- Фаерфокс,
- Опера и
- Сафари.
Заключение
- Свойство фона CSS является сокращением для следующих свойств:
- фоновая клипса,
- цвет фона,
- фоновое изображение,
- фон-происхождение,
- фоновая позиция,
- повтор фона,
- размер фона и
- background-attachment.
- фоновое свойство принимает все восемь свойств, и мы можем сделать множество вариаций его синтаксиса.
- С помощью свойства background мы можем создать несколько фонов для HTML-элемента.
Создание наклонного фона в CSS
Спецификации дизайна для новой темы WordPress, которую я создаю, призывают к фон под углом:
Это заняло некоторое время, чтобы понять это, поэтому — одолжить
классический девиз технического блога — я пишу пост, который хотел бы иметь
нашел, когда я начал вниз по этому пути.
Мои первоначальные поиски того, как другие люди решили эту проблему, привели ко многим
рекомендации таких вещей, как , преобразование , skewY , clip-path ,
и псевдоселекторы.
В то время как было забавно пинать шины на некоторых из новых, продвинутых возможностей CSS, разработанных в последние годы, каждая попытка либо заканчивалась с тонной запаха кода, или я бы обнаружил, что поддержка браузера была ограниченное и, следовательно, нежизнеспособное решение.
Я решил отказаться от всего сложного и вернуться к основам.
Я работаю над фоном, поэтому решил сосредоточиться
в свойстве CSS background . Есть ли широко используемый фон собственность, которая начинается одним цветом и заканчивается другим? Почему да
есть: линейный градиент() .
Сначала я собрал самый простой градиент, который только мог придумать, просто чтобы
оценить целесообразность использования linear-gradient() для этого.
фоновое изображение: линейный градиент (вниз, #22313F, #F4F4F4) :
Неплохо! Нарушены пропорции цвета, неверный ракурс, переход слишком постепенный — но это предлагало лучшее решение еще.
Первым изменением, которое я внес, было расширение темно-синего цвета вниз.
Процент или длина после цвета сообщает градиенту, что цвет должен достичь своего апогея в этом месте.
фоновое изображение: линейный градиент (вниз, #22313F 70%, #F4F4F4) :
Где 0% — это начало фона, а 100% — это конец фон.
Указывает градиенту смешиваться от начального цвета до 70%
фон был закрыт, и в этой точке #22313F находится в своей
вершина
Это дало желаемый эффект, потому что первый цвет также является начальный цвет, ведущий к сплошному цвету вверху (который я в розыске).
Следующий цвет в списке, #F4F4F4 начинается с 70% и достигает
вершина на 100% (поэтому он менее плотный, чем темно-синий.
)
Все еще нужно заострить эту разделительную линию, но она идет.
Вторым изменением, которое я сделал, был небольшой наклон угла.
background-image: linear-gradient(176deg, #22313F 70%, #F4F4F4) :
«вниз» эквивалентно 180deg и оттуда это было просто
Вопрос поиска угла, соответствующего спецификации.
Получение резкого перехода между двумя цветами заняло больше всего времени пора разбираться.
Все щелкнуло, как только я понял, что мне просто нужна вершина #F4F4F4 до и встречаются на 70% фонового изображения. Таким образом, это было бы
сплошной цвет ( # 22313F ) от 0% до 70% и другой сплошной цвет
( #F4F4F4 ) с 70% до 100%.
background-image: linear-gradient(176deg, #22313F 70%, #F4F4F4 70%) :
Так близко! Но эти зазубренные края явно не летали, поэтому мне пришлось Держись! Не сдавайся.
В конце концов я наткнулся на
ответ на переполнение стека, который
предоставил недостающую часть.