it-swarm.com.ru

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

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

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

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

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

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

418
fox

Проверьте это ручка .

Вам придется использовать два разных контейнера, один для фонового изображения, а другой для вашего контента.

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

Оба они размещены с position: fixed и left: 0; right: 0;. Разница в их отображении заключается в значениях z-index, которые были установлены по-разному для элементов.

HTML

<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>

CSS

.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;
}

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

Обновление

Спасибо Мэтью Уилкоксону за лучшую реализацию с использованием .content:beforehttp://codepen.io/akademy/pen/FlkzB

491
Aniket

ручка

Устранение необходимости в дополнительном элементе наряду с приведением содержимого в соответствие с потоком документов, а не фиксированным/абсолютным, как в других решениях.

Достигается с помощью

.content {
  overflow: auto;
  position: relative;
}

Необходимо автоматическое переполнение, иначе фон будет смещен на несколько пикселей вверху.

После этого вам просто нужно

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

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

EDIT Если вы заинтересованы в удалении белых границ по краям, используйте ширину и высоту 110%, а слева и верхнюю часть -5%. Это немного увеличит ваши фоны - но не должно быть сплошного цветового кровотечения с краев. 

Обновленная ручка здесь: https://codepen.io/anon/pen/QgyewB - Спасибо Чаду Фосетту за предложение.

63
Necrone

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

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

Вы также можете использовать 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

30
hitautodestruct

Вам нужно изменить структуру вашего HTML , чтобы сделать это. Вы должны размыть весь элемент, чтобы размыть фон. Так что если вы хотите размыть только фон, это должен быть его собственный элемент.

26
posit labs

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

.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

Простое решение для современных браузеров на чистом css с псевдоэлементом 'before', как решение от Мэтью Уилкоксона . Чтобы избежать необходимости доступа к псевдоэлементу для изменения изображения и других атрибутов в сценарии Java, просто используйте в качестве значения атрибут Наследовать и получить к ним доступ через родительский элемент (здесь тело).

body::before{
  content: ""; /* important */
  z-index: -1; /* important */
  position: inherit;  
  left: inherit;
  top: inherit;
  width: inherit;                                                                               
  height: inherit;  
  background-image: inherit;
  background-size: cover; 
  filter: blur(8px);
}
body{
  background-image: url("xyz.jpg"); 
  background-size: 0 0;  /* image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* or absolute for scrollable backgrounds */  
}   
5
a99

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

2
saikat

все, что вам действительно нужно, это «filter: blur (hatWhatEverYouWantInPx≫)»;

body {
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
}

#background {
  background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  
  /* START */
  /* START */
  /* START */
  /* START */
  
  /* You can adjust the blur-radius as you'd like */
  filter: blur(3px);
  
}
<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>

1
codeWithMe

Конечно, это не CSS-решение, но вы можете использовать CDN Proton с фильтром:

body { 
background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

от https://developer.wordpress.com/docs/photon/api/#filter

1
Max Tusken

Хотя все упомянутые решения очень умны, у всех, казалось, были незначительные проблемы или потенциальное влияние на другие элементы на странице, когда я их пробовал.

В конце концов, чтобы сэкономить время, я просто вернулся к своему старому решению: я использовал Paint.NET и перешел к Effects, Gaussian Blur с радиусом от 5 до 10 пикселей и просто сохранил его как изображение страницы. :-)

HTML:

<body class="mainbody">
</body

CSS:

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

Правка:

Я наконец получил это, но решение ни в коем случае не является простым! Посмотреть здесь:

1
SharpC

Теперь это стало еще проще и гибче благодаря использованию CSS GRID. Вам просто нужно перекрыть размытый фон (imgbg) с текстом (h2)

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

и CSS:

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }


     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }
0
Eljeddi Oussema

div{
 background: inherit;
 width: 250px;
 height: 350px;
 position: absolute;
 overflow: hidden;  //adding overflow hidden
}
div:before{
 content: ‘’;
 width: 300px;
 height: 400px;
 background: inherit; 
 position: absolute;
 left: -25px;  //giving minus -25px left position
 right: 0;
 top: -25px;   //giving minus -25px top position 
 bottom: 0;
 box-shadow: inset 0 0 0 200px rgba(255,255,255,0.3);
 filter: blur(10px);
}

0
prajeesh loremine

Я не писал этого, но заметил, что для частично поддерживаемого backdrop-filter с помощью компилятора CSS SASS существует полифилл, поэтому, если у вас есть конвейер компиляции, это может быть достигнуто красиво: (также используется TypeScript)

https://codepen.io/mixal_bl4/pen/EwPMWo

0
Jonathan

Этот ответ предназначен для горизонтального макета карты Material Design с динамической высотой и изображением.

Чтобы предотвратить искажение изображения из-за динамической высоты карты, вы можете использовать фоновое изображение-заполнитель с размытием, чтобы скорректировать изменения высоты.

Объяснение

  • Карта содержится в <div> с классом wrapper , который является Flexbox. 
  • Карта состоит из 2 элементов: изображения, которое также является ссылкой link, и содержимого. 
  • Ссылка <a>, класс ссылка , позиционируется относительный
  • Ссылка состоит из 2 подэлементов, заполнителя <div> class blur и <img> class pic , который является чистым изображением.
  • Оба расположены absolute и имеют width: 100%, но класс pic имеет более высокий порядок стеков, то есть z-index: 2, что размещает его над заполнителем.
  • Фоновое изображение для размытого заполнителя задается с помощью inline style в HTML.

Код

.wrapper {
  display: flex;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);
  background-color: #fff;
  margin: 1rem auto;
  height: auto;
}

.wrapper:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.link {
  display: block;
  width: 200px;
  height: auto;
  overflow: hidden;
  position: relative;
  border-right: 2px solid #ddd;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.pic {
  width: calc(100% - 20px);
  max-width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.pic:hover {
  transition: all 0.2s ease-out;
  transform: scale(1.1);
  text-decoration: none;
  border: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  overflow-x: hidden;
}

.text {
  margin: 0;
}
<div class="wrapper">
  <a href="#" class="link">
    <div class="blur" style="background: url('http://www.planwallpaper.com/static/assets/img/header.jpg') 50% 50% / cover;"></div>
    <img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
  </a>

  <div class="content">
    <p class="text">Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste
      eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt. </p>
  </div>
</div>

0
Harsha Alva