413

我有一个JPEG文件，我使用CSS来设置它，因为我在Backbone.js contexts中工作：

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

就在我的CSS中的 background-image 下面，它调整了整个页面的样式，而不仅仅是背景 . 有没有办法只选择图像并应用过滤器？或者，有没有办法只为页面上的每个其他元素关闭模糊？

14 回答

483

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

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

回复于 2024-04-29T10:00:02+08:00

看看这个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;
}

为Lorem Ipsum文本道歉 .

更新

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

回复于 2024-04-29T10:00:02+08:00

纯粹css中现代浏览器的简单解决方案，带有'before'伪元素，如Matthew Wilcoxson的解决方案 . 为了避免访问用于更改java脚本中的图像和其他属性的伪元素，简单地使用继承作为值并通过父元素（此处为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 */  
}

回复于 2024-04-29T10:00:02+08:00

这个答案适用于具有动态高度和图像的Material Design水平卡布局 .

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

解释

该卡包含在 <div> 中，类为 wrapper ，这是一个弹性箱 .
该卡由2个元素组成，图像也是链接和内容 .
链接 <a> ，类 link ，位于相对位置 .
该链接由2个子元素组成，占位符 <div> class blur 和 <img> class pic ，即清晰图像 .
两者都是绝对的并且具有 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>

回复于 2024-04-29T10:00:02+08:00

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

回复于 2024-04-29T10:00:02+08:00

所有你真正需要的是“过滤器：模糊（«WhatEverYouWantInPx）;”

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>

回复于 2024-04-29T10:00:02+08:00

63
当然，这不是CSS解决方案，但你可以使用带过滤器的CDN Proton：
```
body { 
background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}
```
来自https://developer.wordpress.com/docs/photon/api/#filter
回复于 2024-04-29T10:00:02+08:00
6
pen

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

实现了使用
```
.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);
}
```
EDIT 如果您有兴趣去除边缘处的白色边框，请使用 110% 的宽度和高度以及 -5% 的左侧和顶部 . 这会使你的背景有点扩大 - 但是边缘应该没有明显的颜色渗透 .

在这里更新笔：https://codepen.io/anon/pen/QgyewB - 感谢Chad Fawcett提出的建议 .
回复于 2024-04-29T10:00:02+08:00

请检查以下代码： -

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

回复于 2024-04-29T10:00:02+08:00

1
尽管提到的所有解决方案都非常聪明，但是当我尝试使用它们时，所有解决方案似乎都有小问题或可能会对页面上的其他元素造成影响 .

最后为了节省时间，我简单地回到了我原来的解决方案：我使用了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;
}
```
EDIT:

我终于让它工作了，但解决方案绝不是直截了当的！看这里：
- filter: blur(1px); doesn't work in firefox, IE, and opera
回复于 2024-04-29T10:00:02+08:00
26

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

回复于 2024-04-29T10:00:02+08:00
0
只是让pep知道，如果这已经没说了 . 如果要将内容设置为可滚动，请将内容的位置设置为绝对：
```
content { 
   position: absolute;
   ...
}
```
我不知道这是否只适合我，但如果不是那就是修复！

Also 自背景修复后，意味着你有'Parallax'效果！因此，不仅要知道这个人教你如何制作模糊的背景，还要知道视差背景效果！
回复于 2024-04-29T10:00:02+08:00
-4

您需要重新构建HTML才能执行此操作 . 您必须模糊整个元素才能模糊背景 . 因此，如果您只想模糊背景，它必须是它自己的元素 .

回复于 2024-04-29T10:00:02+08:00
0
如其他答案中所述，这可以实现有：
- 模糊图像的副本作为背景 .
- 可以过滤然后定位在内容后面的伪元素 .
您也可以使用背景滤镜

有一个名为 backdrop-filter 的受支持属性，它目前是supported in Edge，Safari和iOS Safari（统计数据见caniuse.com） .

来自Mozilla devdocs：

background-filter属性提供模糊或颜色移动元素后面区域等效果，然后可以通过调整元素的透明度/不透明度来查看该元素 .

你会像这样使用它：
```
.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
回复于 2024-04-29T10:00:02+08:00

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

14 回答

更新

解释

代码

您也可以使用背景滤镜

相关问题