如何应用CSS过滤器的背景图像

我有一个JPEG文件，我使用作为搜索页面的背景图像，我使用CSS来设置它，因为我在Backbone.js上下文中工作:

background-image: url("whatever.jpg");

我想应用css3模糊滤镜只有的背景，但我不知道如何样式只是一个元素。如果我试着:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

在我的CSS background-image下面，它为整个页面设置了样式，而不仅仅是背景。是否有一种方法只选择图像并应用过滤器?或者，有没有一种方法可以关闭页面上所有其他元素的模糊效果?

1716546 次浏览
小开

为此，您需要重新构造HTML。为了模糊背景，你必须模糊整个元素。如果你只想模糊背景，它必须是它自己的元素。

小开
最佳答案

看看这个笔。

您必须使用两个不同的容器，一个用于背景图像，另一个用于内容。

在本例中，我创建了两个容器，.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的文本道歉。

更新

感谢马修Wilcoxson使用.content::before https://codepen.io/akademy/pen/FlkzB更好地实现

小开

在CSS中的.content选项卡中将其更改为position:absolute。否则，渲染的页面将不可滚动。

小开

< a href = " https://codepen。io /不久/钢笔/ GpvxBK noreferrer“rel = >笔< / >

取消了对额外元素的需求，同时使内容适合文档流，而不是像其他解决方案那样固定/绝对。

通过使用

.content {
/* this is needed or the background will be offset by a few pixels at the top */
overflow: auto;
position: relative;
}


.content::before {
content: "";
position: fixed;
left: 0;
right: 0;
z-index: -1;


display: block;
background-image: url('https://i.imgur.com/lL6tQfy.png');
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);
}
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

如果你想移除边缘的白色边框，使用宽度和高度为110%，左侧和顶部为-5%。这将放大你的背景-但不应该有纯色从边缘流出。感谢Chad Fawcett的建议。

.content {
/* this is needed or the background will be offset by a few pixels at the top */
overflow: auto;
position: relative;
}


.content::before {
content: "";
position: fixed;
top: -5%;
left: -5%;
right: -5%;
z-index: -1;


display: block;
background-image: url('https://i.imgur.com/lL6tQfy.png');
background-size:cover;
width: 110%;
height: 110%;


-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

小开

请检查以下代码:-

.backgroundImageCVR{
position:relative;
padding:15px;
}
.background-image{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background:url('https://i.imgur.com/5SZI6qZ.jpeg');
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到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;
}

编辑:

我终于让它工作了，但解决方案绝不简单!在这里看到的:

小开

正如在其他答案中所述，这可以通过以下方式实现:

  • 作为背景的模糊图像的副本。
  • 可以过滤的伪元素，然后将其定位在内容后面。

你也可以使用backdrop-filter

有一个受支持的属性叫做backdrop-filter，目前是 Chrome、Firefox、边缘、Safari和iOS Safari均支持(统计信息见caniuse.com)

从# EYZ0:

backdrop-filter属性提供了一些效果，比如对元素后面的区域进行模糊或颜色移动，然后通过调整元素的透明度/不透明度就可以看到元素。

有关使用统计信息，请参阅caniuse.com。

你会这样使用它。 如果你不想让里面的内容模糊，使用实用工具类.u-non-blurred

.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%;
top: 0;
}


.background-filter {
position: relative;
}


.background {
background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
width: 200px;
height: 200px;
}


/* Use for content that should not be blurred */
.u-non-blurred {
position: relative;
z-index: 1;
}
<div class="background background-filter"></div>
<div class="background background-filter">
<h1 class="u-non-blurred">Kermit D. Frog</h1>
</div>

小开

如果你想要内容是可滚动的，设置内容的位置为绝对:

content {
position: absolute;
...
}

我不知道这是不是只适合我，但如果不是，这就是解决办法!

也因为背景是固定的，这意味着你有“视差”效果!所以现在，这个人不仅教你如何制作一个模糊的背景，而且它也是一个视差背景效果!

小开

这个答案是一个材料设计水平卡布局动态高度和图像。

为了防止由于卡片的动态高度而导致图像失真，您可以使用带有模糊的背景占位符图像来调整高度的变化。

 

解释

  • 该卡包含在类为包装器的<div>中，这是一个flexbox。
    • 卡片由两个元素组成，一个是图像，另一个是图像 链接和内容。 链接<a>，类链接，被定位 相对< / em >。
  • 该链接由两个子元素组成，一个占位符<div>类模糊和一个<img>类图片(清晰图像)。
  • 它们的位置都是绝对和width: 100%，但是类图片具有更高的堆栈顺序，即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('https://i.imgur.com/5SZI6qZ.jpeg') 50% 50% / cover;"></div>
<img src="https://i.imgur.com/5SZI6qZ.jpeg" 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和一个'before'伪元素，就像Matthew Wilcoxson的解决方案一样。

为了避免访问伪元素来更改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 */
}
小开 

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解决方案，但你可以使用CDN质子与filter:

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

它来自https://developer.wordpress.com/docs/photon/api/#filter

小开

你所需要的只是“filter”:

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>

小开

我没有写这个，但我注意到有一个polyfill部分支持使用CSS SASS编译器的backdrop-filter，所以如果你有一个编译管道，它可以很好地实现(它也使用TypeScript):

< a href = " https://codepen。io/mixal_bl4/pen/EwPMWo" rel="nofollow noreferrer">https://codepen.io/mixal_bl4/pen/EwPMWo

小开

现在，通过使用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>

小开
你可以在你想要应用过滤器的图像上创建一个div，并使用backdrop-filter到它的CSS类。 检查这个链接

小开

CSS网格对我来说更容易理解。：）

html, body {
width: 100%;
height: 100%;
}


.container {
width: 100%;
height: 100%;
  

display: grid;
grid-template-columns: 1fr 6fr 1fr;
grid-template-rows: 1fr 6fr 1fr;
grid-template-areas:
'. . .'
'. content .'
'. . .';
justify-content: center;
align-items: center;
}


.backbround {
width: 100%;
height: 100%;
  

grid-area: 1/1/5/5;
  

background-image: url(https://i.imgur.com/aUhpEz3.jpg);
filter: blur(5px);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}


.content {
height: 200px;
position: relative;
  

grid-area: content;
display: flex;
  

justify-content: center;
align-items: center;
color: white;
}
<div class="container">
<div class="backbround"></div>
<div class="content"><h1>Hello World</h1></div>
</div>

小开

成功应用背景图像的步骤

  1. 确保你已经正确链接你的HTML和CSS使用链接标签 # EYZ0 < / p >

  2. 我不知道相对目录和子目录，所以我不能评论它

  3. 对我来说最好的方法是当我在css中使用URL链接时

#yourcssdoc .image {
background-image: url("paste your link here with the quotations")
}
小开 
<!-- Q:Create the blur on parenttal div without effecting the child div -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0; padding: 0; box-sizing: border-box;
font-size: 30px;
}
.parent{
background-image:url(hobby.jpg) ;
height: 100vh;
width: 100vw;
background-repeat: no-repeat;
background-size: cover;
background-position: center;


display: flex;
justify-content: center;
align-items: center;
}
.child{
   

height: 90vh;
width: 90vw;
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 0, 0, 0.418);
justify-content: center;
align-items: center;
display: flex;
    

 

}
.text{
    

height: 300px;
width: 300px;
border-radius: 500px;
background-image: url(50cf380e5c78eb174faa8e6ac2cb654a.jpg);
background-size: cover;
background-position: center;
      



}
    

    

</style>
<body>
<div class="parent">
<div class="child">
<div class="text"></div>
</div>
</div>
</body>
</html>
小开

规范引入了一个新的filter()函数，你可以像下面这样使用背景图像:

background: filter(url("whatever.jpg"), blur(5px));

<filter()>函数有两个参数。第一个参数是<image>。第二个是为CSS filter属性指定的筛选器函数列表。该函数接受参数并应用筛选规则，返回一个处理图像。

但是浏览器不支持这个:https://caniuse.com/css-filter-function。目前只能在Safari上进行测试。


提交答案