Как применить CSS-фильтр к фоновому изображению

У меня есть файл JPEG, который я использую в качестве фонового изображения для страницы поиска, и я использую CSS для его установки, потому что я работаю в контекстах Backbone.js :

background-image: url("whatever.jpg");

Я хочу применить CSS 3 фильтр размытия только к фону, но я не уверен, как стилизовать только этот один элемент. Если я попытаюсь:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

чуть ниже background-image в моем CSS, это стилизует всю страницу, а не только фон. Есть ли способ выбрать только изображение и применить к нему фильтр? В качестве альтернативы, есть ли способ просто отключить размытие для каждого другого элемента на странице?

439
задан Temani Afif 26 July 2019 в 19:21
поделиться

3 ответа

На вкладке .content в CSS измените его на position:absolute. В противном случае отображаемая страница не будет прокручиваться.

2
ответ дан Webruster 26 July 2019 в 19:21
поделиться

Пожалуйста, проверьте следующий код: -

.backgroundImageCVR{
	position:relative;
	padding:15px;
}
.background-image{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
	background-size:cover;
	z-index:1;
	-webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);	
}
.content{
	position:relative;
	z-index:2;
	color:#fff;
}
<div class="backgroundImageCVR">
    <div class="background-image"></div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
      <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
    </div>
</div>
6
ответ дан Sumitava Das 26 July 2019 в 19:21
поделиться

Как указано в других ответах, это может быть достигнуто с помощью:

  • Копия размытого изображения в качестве фона.
  • Псевдоэлемент, который затем может быть отфильтрован и размещен за контентом.

Вы также можете использовать backdrop-filter

Существует поддерживаемое свойство под названием backdrop-filter, и в настоящее время поддерживается в Edge , Safari и iOS Safari (статистику см. в caniuse.com ).

Из Mozilla devdocs :

Свойство фонового фильтра обеспечивает такие эффекты, как размытие или смещение цвета в области позади элемента, которые затем можно увидеть через этот элемент с помощью настройка прозрачности / непрозрачности элемента.

Вы можете использовать это так:

.box {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* No one supports non prefixed yet */
}

Статистику см. В caniuse.com .

Обновление (12/06/2019) : Chromium будет поставляться с включенным backdrop-filter по умолчанию в версии 76, которая должна быть выпущена 30/07/2019 .

Обновление (01/06/2019) : Команда Mozzilla Firefox объявила , что скоро приступит к реализации этого.

Обновление (21/05/2019) : только что анонсированный Chromium backdrop-filter доступен в Chrome Canary без флажка «Включить функции экспериментальной веб-платформы». Это означает, что backdrop-filter очень близок к реализации на всех платформах Chrome.

47
ответ дан hitautodestruct 26 July 2019 в 19:21
поделиться
Другие вопросы по тегам:

Похожие вопросы: