如何将CSS 3模糊滤镜应用于背景图像

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

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

我只想将CSS 3模糊滤镜应用于背景，但是我不确定如何devise这一个元素。 如果我尝试：

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

就在我的CSS中的background-image下面，它的样式是整个页面，而不仅仅是背景。 有没有办法只select图像，并应用filter？ 另外，有没有办法只是closures页面上的其他每个元素的模糊？

Answer 1

看看这支笔 。

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

在这个例子中，我创build了两个容器， .background-image和.content 。

他们两个都放置在position: fixed和left: 0; right: 0; 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; } 

为Lorem Ipsum文本道歉。

更新

感谢Matthew Wilcoxson使用.content:before更好的实现.content:before http .content:before //codepen.io/akademy/pen/FlkzB

Answer 2

钢笔

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

实现使用

 .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%的左侧和顶部。 这会使你的背景放大一点 – 但是从边缘不应该有纯色的stream血。

更新笔在这里： https : //codepen.io/anon/pen/QgyewB – 谢谢乍得Fawcett的build议。

Answer 3

您需要重新构build您的HTML以执行此操作。 你必须模糊整个元素，以模糊背景。 所以如果你只想模糊背景，它必须是自己的元素。

Answer 4

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

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

您也可以使用backdrop-filter

有一个名为backdrop-filter的支持属性，目前仅支持Safari和iOS Safari 9.2+（请参阅caniuse.com获取统计信息）。

来自Mozilla devdocs ：

背景滤镜属性提供了效果，如模糊或颜色移动元素后面的区域，然后可以通过调整元素的透明度/不透明度通过该元素看到。

你会像这样使用它：

 .box { backdrop-filter: blur(5px); /* background, width, height etc. */ } 

状态：

• 在Safari 9.0中工作（不需要-webkit标志）。
• 壁虎有它作为一个错误打开。
• Chrome团队的状态标记为“已build议” 。
• Microsoft Edge的状态标记为“考虑不足”

Answer 5

请检查以下代码： –

 .backgroundImageCVR{ position:relative; padding:15px; } .background-image{ position:absolute; left:0; right:0; top:0; bottom:0; background:url('http://www.planwallpaper.com/statichttp://img.dovov.comcolorful-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> 

Answer 6

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

Answer 7

尽pipe提到的所有解决scheme都非常聪明，但是当我尝试使用这些解决scheme时，似乎都有一些小问题或与页面上的其他元素产生了潜在的影响。

为了节省时间，我简单地回到了我以前的解决scheme：我使用了Paint.NET ，然后进入效果，高斯模糊，半径为5到10像素，并将其保存为页面图像。 🙂

HTML：

 <body class="mainbody"> </body 

CSS：

 body.mainbody { background: url('..http://img.dovov.commyphoto.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; } 

编辑：

我终于搞定了，但解决scheme绝非易事！ 看这里：

• filter：blur（1px）; 在Firefox，IE和Opera中不起作用

Answer 8

此答案适用于具有dynamic高度和图像的Material Design水平卡布局。

为防止由于卡的dynamic高度造成图像失真，可以使用带有模糊的背景占位符图像来调整高度变化。

说明

• 该卡被包含在一个带有类包装器的<div> ，这是一个flexbox。
• 该卡由2个元素组成，也是一个链接的图像和内容。
• 链接<a> ，类链接 ，是相对位置。
• 该链接由2个子元素组成，一个占位符<div>类模糊和一个<img>类pic ，这是清晰的图像。
• 两者都是绝对定位的，并且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('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> 

Answer 9

现代浏览器在纯CSS中的简单解决scheme，具有“before”伪元素，就像Matthew Wilcoxson的解决scheme。 为了避免在java脚本中访问用于改变图像和其他属性的伪元素的需要，简单地使用inheritance作为值并通过父元素（这里是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 */ } 

Answer 10

只要让pep知道，如果这已经没有说了。 如果要将内容滚动，请将内容的位置设置为绝对：

 content { position: absolute; ... } 

我不知道这是否只是为了我，但如果不是这样的话！

另外，由于背景是固定的，这意味着你有一个'视差'的效果！ 所以不仅知道这个人教你如何制作一个模糊的背景，而且还有一个视差的背景效果！