Как да приложите 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, той стилизира цялата страница, а не само фона. Има ли начин да изберете само изображението и да приложите филтъра към него? Алтернативно, има ли начин просто да се изключи размазването за всеки друг елемент на страницата?

Temani Afif
Редактиран въпрос Направете юли 2019 в 7:21
Програмиране
css css-filters background-image
Направете ноември 2013 в 3:49
10 изгледи
Решение

Вижте тази писалка.

Ще трябва да използвате два различни контейнера - единият за фоновото изображение, а другият за съдържанието.

В примера съм създал два контейнера: .background-image и .content.

И двата са поставени с position: fixed и left: 0; right: 0;. Разликата в показването им идва от стойностите на z-index, които са зададени по различен начин за елементите.

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  width: 1200px;
  height: 800px;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}
<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>

Извинявам се за Lorem Ipsum текста.

Актуализация

Благодарение на Matthew Wilcoxson за по-доброто изпълнение с помощта на .content:before http://codepen.io/akademy/pen/FlkzB

ths
Редактиран отговор Направете юли 2019 в 4:09
Коментари (17)

За да направите това, трябва да промените структурата на вашия HTML. Трябва да размажете целия елемент, за да размажете фона. Така че, ако искате да размажете само фона, той трябва да бъде отделен елемент.

Peter Mortensen
Редактиран отговор Направете ноември 2014 в 11:49
Коментари (0)

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

Webruster
Редактиран отговор Направете септември 2015 в 12:50
Коментари (0)