У меня есть файл 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('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>
Прошу прощения за Lorem 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%
. Это позволит увеличить ваши фоны немного - но не должно быть сплошного цвета кровотечение из краев.
Обновленная ручка здесь: https://codepen.io/anon/pen/QgyewB - спасибо Фосетт чад за предложение.
Как указано в другие ответы, это может быть достигнуто при:
фон-фильтр
Существует поддерживаемое свойство, которое называется фон-фильтр
, и в настоящее время
поддерживается в Chrome 76, край, сафари, и сафари на iOS (см. caniuse.com для статистики).
Из Мозилла 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): хром грузит с фоном-фильтра включена по умолчанию в версии 76, который должен выйти 30/07/2019]4.
Обновление (01/06/2019): команда Mozzilla Firefox и объявил он начнет работать в ближайшее время реализуем это.
Обновление (21/05/2019): хром только что объявил фон-фильтр
доступно в Chrome Canary без включения "и включить экспериментальные функции веб-платформы" и флаг. Это означает `фон-фильтр-это очень близко к осуществляется на всех хром платформ.
Для этого необходимо изменить структуру 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, просто использовать наследовать
, как значение, и открыть их с помощью родительского элемента (здесь "тело").
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 */
}
Хотя все упомянутые решения очень умные, казалось бы, мелкие вопросы или рикошетного по воздействию с другими элементами на странице, когда я попытался их.
В конце концов, чтобы сэкономить время, я просто вернулся к своим старым решение: я использовал Paint.NET и пошел эффекты, Размытие по Гауссу с радиусом от 5 до 10 пикселей и спас, что в качестве изображения страницы. :-)
HTML-код:
<body class="mainbody">
</body
Усс:
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;
}
Редактировать:
Я, наконец, получил это работает, но решение отнюдь не прост! Смотрите здесь:
Все, что вам на самом деле нужно есть "фильтр" и:
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 Протон с "фильтр":
body {
background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}
Это от https://developer.wordpress.com/docs/photon/api/#filter
Теперь это стало еще проще и более гибкой с помощью сетки CSS.Вы просто должны перекрывать размыли фон(imgbg) с текстом(Н2)
<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;
}
Это ответ на материал Дизайн горизонтальная раскладка карт с динамической высотой и изображения.
Чтобы предотвратить искажение изображения благодаря динамической высоты карты, вы можете использовать фоновое изображение заполнитель с Blur, чтобы приспособиться для изменений в высоте.
&ампер;усилитель; nbsp;
<див>
С класса фантик, который является на основе.<и>
, класс ссылка, расположенный
относительно.<див> класс **размытие** и
<ИМГ> класс рис, который является четкое изображение.ширина: 100%
, но класса рис имеет более высокий порядок, стек, т. е. `Z-индекса: 2, которая ставит его выше заполнителя.&ампер;усилитель; nbsp;
Код ##
в
.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>
в
в
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);
}
в
Я не'т писать это, но я заметил, что существует полифилл для частично поддерживается фон-фильтр
используя CSS Сасс компилятора, так что если у вас есть подборка трубопровода может быть достигнута красиво (она также использует машинопись):
Если вы хотите контент, чтобы быть с возможностью прокрутки, установить позицию контент в абсолютные:
content {
position: absolute;
...
}
Я не'т знаю, если это было только для меня, но если бы не это'ы исправить!
Также поскольку фон является фиксированной, это означает, что вы есть и"параллакс" и влияние! Так теперь мало того, что этот человек научит вас, как сделать расплывчатый фон, но это также параллакс эффект фона!