У меня есть файл 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, он стилирует всю страницу, а не только фон. Есть ли способ выбрать только изображение и применить фильтр к этому? Альтернативно, есть ли способ просто отключить размытие для каждого другого элемента на странице?
Посмотрите pen.
Вам нужно будет использовать два разных контейнера: один для фонового изображения, а другой для вашего контента.
В этом примере я создал два контейнера, .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;
}
Извинения за лормский текст Ipsum.
Благодаря Matthew Wilcoxson для лучшей реализации с использованием .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%
. Это увеличит ваш фон чуть-чуть - но не должно быть сплошного цвета, кровоточащего из краев.
Обновлено Pen здесь: https://codepen.io/anon/pen/QgyewB - Спасибо Чэду Фосетту за это предложение.
width
и height
до 110%
а затем добавить смещение -5%
к top
и left
content:before
классом.
Как указано в других ответах, это может быть достигнуто с помощью:
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
Для этого вам необходимо перестроить 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 с псевдоэлементом "before", как решение от Matthew Wilcoxson. Чтобы избежать необходимости доступа к псевдоэлементу для изменения изображения и других атрибутов в java script, простое использование наследует как значение и получает доступ к ним через родительский элемент (здесь тело).
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
. В противном случае отображаемая страница не будет прокручиваться.
Конечно, это не CSS-решение, но вы можете использовать CDN Proton с фильтром:
body {
background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}
from https://developer.wordpress.com/docs/photon/api/#filter
localhost
во время тестирования?
Хотя все упомянутые решения очень умны, у всех, казалось, были незначительные проблемы или потенциальные удары по эффектам с другими элементами на странице, когда я их пробовал.
В конце, чтобы сэкономить время, я просто вернулся к своему старому решению: я использовал 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:
Наконец-то я получил работу, но решение отнюдь не просто! См. Здесь:
Я не писал этого, но заметил, что для частично поддерживаемого backdrop-filter
с помощью компилятора CSS SASS существует полифил, поэтому, если у вас есть конвейер компиляции, это может быть достигнуто красиво: (также используется машинопись)
все, что вам действительно нужно, это "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>
div {
background: inherit;
ширина: 250 пикселей;
высота: 350 пикселей;
позиция: абсолютная;
переполнение: скрыто;//добавление переполнения скрыто
}
ДИВ: перед тем {
content: ';
ширина: 300 пикселей;
высота: 400 пикселей;
background: inherit;
позиция: абсолютная;
left: -25px;//предоставление минус -25px влево
право: 0;
наверх: -25px;//предоставление минус -25px верхней позиции
bottom: 0;
box-shadow: inset 0 0 0 200px rgba (255,255,255,0,3);
filter: blur (10px);
}Код>
Этот ответ предназначен для макета горизонтальной карты Material Design с динамической высотой и изображением.
Чтобы предотвратить искажение изображения из-за динамической высоты карты, вы можете использовать фоновое изображение заполнителя с размытием, чтобы отрегулировать изменения высоты.
<div>
с оболочкой , которая является
flexbox.<a>
, класс ссылка, расположена
относительный.<div>
class blur и <img>
class pic, который является четким изображением.width: 100%
, но класс pic имеет более высокий порядок стека, т.е. z-index: 2
, который помещает его выше заполнителя.
.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>
Просто дайте понять, если это уже не было сказано. Если вы хотите, чтобы контент был прокручиваемым, установите абсолютное положение содержимого:
content {
position: absolute;
...
}
Я не знаю, было ли это только для меня, но если бы не это исправление!
Также, поскольку фон фиксирован, это означает, что у вас есть эффект "Parallax"! Знайте, что этот человек не только научил вас делать размытый фон, но и эффект фона параллакса!