Для этого нужно учитывать, чтобы оба фона совпали. В примере они расположены по центру, без масштаба.
Пример:
Текст на размытом фоне
HTML:
|
1 2 3 |
<div class="glass"> <span>Текст на размытом фоне</span> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.glass { height: 400px; width: 100%; display: flex; justify-content: center; align-items: center; background: url("background.jpg") center no-repeat; } .glass span { position: relative; text-align: center; color: #FFF; width: 80%; font-size: 36px; line-height: 40px; padding: 40px 0; box-shadow: 0 6px 18px rgba(0,0,0,0.2), 0 16px 28px rgba(0,0,0,0.1); border-radius: 10px; text-shadow: 0 0 12px rgba(0,0,0,0.6); text-transform: uppercase; letter-spacing: 4px; z-index: 1; overflow: hidden; } .glass span:before { content: ""; position: absolute; top: -50%; left: -50%; height: 200%; width: 200%; background: url("background.jpg") center no-repeat; filter: blur(8px); z-index: -1; } |
Для получения не менее интересных эффектов можно использовать другие CSS фильтры, например: filter: blur(1px) grayscale(1)
Текст на черно-белом фоне
или filter: blur(1px) sepia(1)
Текст на фоне сепии
Аналогичный эффект можно получить используя CSS-свойство backdrop-filter, но оно имеет малую совместимость (подробнее на MDN)
Пример с использованием backdrop-filter:
Текст на размытом фоне
HTML:
|
1 2 3 |
<div class="glass-backdrop"> <span>Текст на размытом фоне</span> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.glass-backdrop { height: 400px; width: 100%; display: flex; justify-content: center; align-items: center; margin: 20px 0; background: url("background.jpg") center no-repeat; } .glass-backdrop span { position: relative; text-align: center; color: #FFF; width: 80%; font-size: 36px; line-height: 40px; padding: 40px 0; box-shadow: 0 6px 18px rgba(0,0,0,0.2), 0 16px 28px rgba(0,0,0,0.1); border-radius: 10px; text-shadow: 0 0 12px rgba(0,0,0,0.6); text-transform: uppercase; letter-spacing: 4px; z-index: 1; overflow: hidden; backdrop-filter: blur(8px); } |
Добавить комментарий: