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

Ответ 1

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

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

В этом примере я создал два контейнера, .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>

Ответ 2

pen

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

Достигнуто с помощью

.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 - Спасибо Чэду Фосетту за это предложение.

Ответ 3

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

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

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

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

Из разработчиков Mozilla:

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

Смотрите 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>

Ответ 4

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

Ответ 5

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

.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

Ниже приведено простое решение для современных браузеров на чистом 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 */
}

Ответ 7

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

Ответ 8

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

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

EDIT:

Наконец-то я получил работу, но решение отнюдь не просто! См. Здесь:

• фильтр: размытие (1px); не работает в firefox, IE и opera

Ответ 9

Конечно, это не 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

Ответ 10

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

blur(«WhatEverYouWantInPixels»);"

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>

Ответ 11

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

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

объяснение

• Карточка содержится в <div> с упаковщиком классов, который является flexbox.
• Карта состоит из двух элементов: изображения, которое также является ссылкой, и содержимого.
• Ссылка <a>, ссылка на класс, расположена относительно.
• Звено состоит из двух суб-элементов, местозаполнитель <div> Класс размытия и <img> класс Pic который является четкое изображение.
• Оба расположены абсолютно и имеют 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>

Ответ 12

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

Ответ 13

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

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

Ответ 14

Теперь это стало еще проще и гибче благодаря использованию 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;
      }

Ответ 15

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

content {
   position: absolute;
   ...
}

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

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