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

467

У меня есть файл 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, он стилизует всю страницу, а не только фон. Есть ли способ выбрать только изображение и применить к нему фильтр? В качестве альтернативы, есть ли способ просто отключить размытие для каждого другого элемента на странице?

лиса
источник
2
Размытие только части изображения: codepen.io/vsync/pen/gjMEWm
vsync

Ответы:

528

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

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

В этом примере я создал два контейнера .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('https://i.imgur.com/lL6tQfy.png');
  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 .

Обновить

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

Aniket
источник
79
Несколько лучший способ сделать это - использовать .content: before вместо дополнительной разметки background-image. Я обновил перо здесь: codepen.io/akademy/pen/FlkzB
Мэтью Уилкоксон
6
Кстати, только Webkit реализовал эту функцию, и там только с префиксом поставщика, поэтому префиксы ms-, o-, moz- бесполезны.
Jon Z
2
Он поддерживается в Firefox 35.0 и более поздних версиях по умолчанию: caniuse.com/#feat=css-filters
Микко Ранталайнен,
1
JUst обновлен до FF 35, и он работает без префикса
Аамир Махмуд
1
@ EdwardBlack Я не думаю, что это проблема, но чтобы иметь постоянное размытие, вам придется прибегнуть к инструментам редактирования изображений. Другой способ может заключаться в том, чтобы сделать какой-то захват изображения с помощью браузера phantomJS / headless webkit, а затем обслуживать его, но это утомительный способ достижения того же результата.
Аникет
70

ручка

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

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

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

РЕДАКТИРОВАТЬ Если вы хотите удалить белые границы по краям, используйте ширину и высоту, 110%а также левую и верхнюю части -5%. Это немного увеличит ваши фоны - но не должно быть сплошного цветового кровотечения с краев.

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

Necrone
источник
1
Ограничением является то, что вы не можете манипулировать псевдоэлементами в js. Если вам не нужно, то это хорошее решение.
posit labs
6
Если вам не нравится , размытой белой каймой вы можете увеличить widthи heightдо , 110%а затем добавить смещение -5%к topи leftот content:beforeкласса.
Чад Фосетт
1
Это работает для меня, но я хочу, чтобы фоновое изображение также прокручивалось, когда пользователь прокручивает страницу. Фиксированная позиция останавливает это. Как избавиться от этой проблемы?
DEEPAN KUMAR
61

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

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

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

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

Из Mozilla Devdocs :

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

Смотрите caniuse.com для статистики использования.

Вы бы использовали это так:

.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* Supported in Chrome 76 */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}
<div class="background background-filter"></div>

Обновление (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.

hitautodestruct
источник
5
Даже если это не работает во всех браузерах, вы получите мой голос за предоставление безошибочного способа сделать это.
MrMesees
AFAIK, это нестандартная функция, поэтому нет никаких спецификаций для нее.
Vitim.us
3
БЕРЕГИСЬ! В 2018 году поддержка браузера значительно упала за это! Не поддерживается в Edge, Firefox или Chrome.
protoEvangelion
@protoEvangelion Похоже, что он будет доступен в Edge 16+, и я не вижу других браузеров, заявляющих, что они не будут реализовывать это. Какие-нибудь факты, подтверждающие эти заявления?
hitautodestruct
@hitautodestruct Согласно caniuse.com IE, Edge 16, Firefox и Chrome в настоящее время не поддерживают это по умолчанию. Вы правы, что Edge 17+ поддерживает это. Спасибо что подметил это. Классный ответ, хотя, между прочим, я действительно надеюсь, что браузеры реализуют это :)
protoEvangelion
26

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

Posit Labs
источник
7

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

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

Сумитава дас
источник
5

Ниже приведено простое решение для современных браузеров на чистом CSS с псевдоэлементом «до», как, например, решение Мэтью Уилкоксона.

Чтобы избежать необходимости доступа к псевдоэлементу для изменения изображения и других атрибутов в JavaScript, просто используйте inheritв качестве значения и обращайтесь к ним через родительский элемент (здесь body).

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 */
}
A99
источник
Это не работает для меня. У вас есть работающий jsfiddle?
Мэтт
2

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

Saikat
источник
1

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

В конце концов, чтобы сэкономить время, я просто вернулся к своему старому решению: я использовал 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;
}

РЕДАКТИРОВАТЬ:

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

SharpC
источник
Вы загружаете 2 imgs
Ced
1

Все, что вам действительно нужно, это «фильтр»:

blurWhatEverYouWantInPixels»);"

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>

codeWithMe
источник
1

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

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

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

Макс Тускен
источник
Какие-нибудь хитрые способы заставить это работать во localhostвремя тестирования?
Джонатан
Степень размытия для изображения с большим разрешением слишком тонкая, как я могу значительно увеличить степень размытия, чтобы она не выглядела неравномерно? Ширина немного помогает, но выглядит слишком густо, если я слишком много размываю
Джонатан
0

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

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

Джонатан
источник
0

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

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

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

 

объяснение

  • Карточка содержится в обертке<div> с классом , которая представляет собой flexbox.
  • Карта состоит из двух элементов: изображения, которое также является ссылкой, и содержимого.
  • Ссылка <a>, класс ссылка , позиционируется по отношению .
  • Звено состоит из двух субэлементов, в заполнителе <div>класс размытия и <img>класс рис , который является четким изображением.
  • Оба позиционируются как абсолютные и имеют width: 100%, но класс pic имеет более высокий порядок стека, т. z-index: 2Е. Размещает его над заполнителем.
  • Фоновое изображение для размытого заполнителя задается с помощью встроенного стиля в 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

Теперь это стало еще проще и гибче благодаря использованию 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
$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}
Карлос Бойзо
источник
1
Добавление объяснения к вашему ответу было бы здорово.
Арвинд Маурья
Если я назову следующий код и нарисую все элементы на теле, возможно, придется попросить о помощи, чтобы изображение было только на фоне тела. $ fondo: url (/grid/assets/img/backimage.png); {отступ: 0; поле: 0; } body {:: before {content: ""; высота: 1008 пикселей; ширина: 100%; дисплей: гибкий; положение: абсолютное; background-image: $ fondo; повторение фона: без повтора; background-position: center; размер фона: обложка; фильтр: размытие (1.6рем); }}
Карлос Бойзо
0

Без использования псевдокласса из

body{
    background:#cecece;
    font-family: "Scope One", serif;
    font-size: 12px;
    color:black;
    margin:0 auto;
    height:100%;
    width:100%;
    background-image: 
       linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.81)), 
        url(https://i.imgur.com/2rRMQh7.jpg);
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
}
<body></body>

построители кода
источник
-6

Если вы хотите, чтобы содержимое было прокручиваемым, установите абсолютную позицию содержимого:

content {
   position: absolute;
   ...
}

Я не знаю, было ли это только для меня, но если нет, то это исправление!

Также, поскольку фон исправлен, это означает, что у вас есть эффект "параллакса" ! Так что теперь этот человек не только научил вас делать размытый фон, но и стал эффектом параллакса!

user7226407
источник
4
не отвечает на вопрос
gorn