Обзор
Чтобы применить к элементу реалистичные узоры выветривания или текстуры (например, гранж, шум или текстуру бумаги), используйте маскирование CSS (mask-image) с повторяющимся изображением текстуры. Это позволяет сделать текстурированным сам контент, сделав его части полупрозрачными, а не просто наложить текстуру сверху. Это позволяет добиться более реалистичного внешнего вида материалов.
Реализация
Чтобы применить текстуру:
Способ 1. Повторяющееся растровое изображение (рекомендуется для реалистичных текстур)
Это самый распространенный метод для реалистичных текстур.
.weathered-element {
/* MANDATORY: Use vendor prefix for wider support in older browsers */
-webkit-mask-image: url('grunge-pattern.png');
-webkit-mask-repeat: repeat; /* Repeat the pattern to fill the area */
-webkit-mask-size: 300px; /* Control the scale of the texture */
/* Standard property for modern browsers */
mask-image: url('grunge-pattern.png');
mask-repeat: repeat;
mask-size: 300px;
}
Способ 2. Использование градиентов CSS для геометрических узоров
Вы можете создавать узоры, используя градиенты CSS. Это автономный формат, не требующий внешних графических файлов.
.patterned-element {
--checkerboard-gradient:
linear-gradient(45deg, #000 25%, transparent 25%),
linear-gradient(-45deg, #000 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #000 75%),
linear-gradient(-45deg, transparent 75%, #000 75%);
/* Apply a checkerboard pattern as a mask */
-webkit-mask-image: var(--checkerboard-gradient);
-webkit-mask-size: 20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
mask-image: var(--checkerboard-gradient);
mask-size: 20px 20px;
mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
Режимы маскирования: альфа-канал и яркость
По умолчанию для масок CSS используется mask-mode: match-source. Это означает, что браузер автоматически решает, использовать ли альфа-канал (прозрачность) или яркость маски, в зависимости от того, какой тип источника вы предоставляете:
| Тип источника маски | Режим маски по умолчанию | Поведение маски |
|---|---|---|
Встроенный элемент SVG <mask> |
luminance |
Прозрачность определяется яркостью цветов. Белый цвет показывает контент, черный – скрывает, а серый – делает полупрозрачным. |
| Графический файл (например, PNG или SVG). | alpha |
Непрозрачность определяется прозрачностью. Непрозрачные части показывают контент, а прозрачные – скрывают. |
| CSS Gradient | alpha |
Непрозрачность определяется прозрачностью. Непрозрачные цвета (например, black) показывают контент, а прозрачные – скрывают. |
Резервные стратегии
Если браузер не поддерживает mask-image или версию с префиксом:
- Элемент будет показан без текстуры (сплошная заливка).
- Убедитесь, что контент остается читаемым и без текстуры (прогрессивное улучшение).
- Чтобы имитировать текстуру, можно использовать фоновое изображение или оверлей, но это не повлияет на прозрачность самого контента.
/* Fallback: Use a background image for browsers without mask support */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
.weathered-element {
/* Fallback adds texture on top or behind, depending on implementation */
background-image: url('grunge-pattern.svg');
background-color: #fff; /* Ensure background is solid if needed */
}
}