Давайте поговорим об основах, не вдаваясь в подробности. Иногда интерфейсная часть сталкивается с необходимостью размыть фон, но требует четкого контента. Давайте сначала посмотрим на эффект:
Ниже приводится конкретная реализация:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Размытие фона</title></head><body> <div class=main><!-- Следующее Фон размыт, а остальное содержимое четкое--><!-- Слой контента--> <div class=banner> <div class=banner-contain> <h1>Я — содержимое</h1> </div> < -- Фоновый слой --> <div class=banner-bg></div> </div> </div> <style> .main{ ширина: 100% } .banner{ ширина: 100%; позиция: относительная } .banner-bg{ width: 100%;/*Ширина заполняет экран*/padding-top: 52,734%;/*Для получения этого значения высота изображения делится на ширину*/background: url(test.jpg)center center no-repeat;/*Два центра имеют горизонтальное и вертикальное выравнивание соответственно*/ background-size: 100%;/*Фон растянут по горизонтали*/ filter:blur(10px /*); Значение размытия, чем оно больше, тем оно размытее*/ } .banner-contain{ Position: Absolute;/*Установить абсолютное позиционирование слоя с контентом*/ width: 100%; text-align: center; : 6;/*Вывести контент наверх*/margin-top: 6% } </style></body></html> 1. Адаптивная реализация:Установите для верхнего края тега div процентное значение. Значения заполнения и поля рассчитываются на основе ширины, а не высоты экрана, поэтому вы можете соответствующим образом установить адаптивную область. Например, информация об изображении следующая. следует
Тогда соотношение высоты к ширине составит: 540/1024, что составляет около 52,734%, то есть высота составляет 52,734% ширины. Здесь ширина установлена равной 100%, тогда padding-top ширины равен. 52,734%*100%
Настройте два слоя, один — слой размытия фона, адаптивно поддерживает весь внешний контейнер div, устанавливает значение размытия через filter:blur() , другой — слой содержимого, абсолютное позиционирование, установите z-index для увеличения Слои содержимого не блокируются, поэтому на слой содержимого не влияет размытие
Выше приведен пример кода, который редактор представляет вам на интерфейсе для достижения размытия фона, но с четким и адаптивным контентом. Я надеюсь, что он будет вам полезен. Если у вас есть какие-либо вопросы, оставьте сообщение мне и редактору. ответим вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!
Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!