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

Ознайомтеся з цією ручкою .

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

У прикладі я створив два контейнери .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

ручка

Скасування потреби в додатковому елементі, а також приведення вмісту в документообіг, а не фіксованого / абсолютного, як інші рішення.

Досягнуто використання

.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%. Це збільшить ваше фоновий малюнок - але не повинно бути кров’ю з однотонних кольорів.

Оновлена ​​ручка тут: https://codepen.io/anon/pen/QgyewB - Дякую Чаду Фоссет за пропозицію.

Як зазначено в інших відповідях, цього можна досягти за допомогою:

• Копія розмитого зображення як фону.
• Псевдоелемент, який можна відфільтрувати, потім розташувати за вмістом.

Ви також можете використовувати 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) : нещодавно оголошений backdrop-filter хром доступний у хромованій канарці, не вмикаючи прапор "Увімкнути функції експериментальної веб-платформи". Це означає backdrop-filter, що дуже близьке до впровадження на всіх хромованих платформах.

Для цього вам потрібно переструктурувати свій HTML . Ви повинні розмити весь елемент, щоб розмити фон. Тож якщо ви хочете розмити лише фон, це повинен бути його власний елемент.

Перевірте наведений нижче код: -

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

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

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

Хоча всі згадані рішення є дуже розумними, але, здавалося, у мене виникли незначні проблеми або потенційний вплив на інші елементи сторінки, коли я їх спробував.

Зрештою, щоб заощадити час, я просто повернувся до свого старого рішення: я використав Paint.NET і перейшов до ефектів, розмиття Гаусса з радіусом від 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;
}

Редагувати:

Зрештою, я працював, але рішення аж ніяк не просто! Дивіться тут:

• фільтр: розмиття (1px); не працює у Firefox, IE та Opera

Все, що вам потрібно, це "фільтрувати":

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>

Звичайно, це не 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

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

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

Ця відповідь стосується горизонтального макета картки Material Design з динамічною висотою та зображенням.

Щоб запобігти викривленню зображення через динамічну висоту картки, ви можете використовувати фонове заповнення зображення із розмиттям, щоб регулювати зміни висоти.

Пояснення

• Картка міститься в обгортці<div> класу , який є флексбоком.
• Картка складається з двох елементів, зображення, яке також є посиланням, та змісту.
• Посилання <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>

Тепер це стає ще простішим та гнучкішим за допомогою 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;
      }

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

Без використання псевдокласу від

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>

Якщо ви хочете, щоб вміст прокручувався, встановіть положення вмісту в абсолютне:

content {
   position: absolute;
   ...
}

Я не знаю, чи це було тільки для мене, але якщо ні, це виправлення!

Також оскільки фон фіксований, це означає, що у вас є ефект "паралакса" ! Тож тепер ця людина не тільки навчила вас робити розмитий фон, але це також ефект фонового паралакса!