更新

Question

我有一个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);

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

Answer 1

查看此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

更好地实施

Answer 2

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

编辑如果您想要删除边缘处的白色边框，请使用110%的宽度和高度以及-5%的左侧和顶部。这会使你的背景有点扩大 - 但是边缘应该没有纯色出血。

此处更新了笔：https://codepen.io/anon/pen/QgyewB - 感谢Chad Fawcett提出的建议。

Answer 3

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

模糊图像的副本作为背景。
可以过滤然后位于内容后面的伪元素。

您还可以使用`backdrop-filter`

有一个名为backdrop-filter的受支持属性，目前为supported in Edge，Safari和iOS Safari（统计信息请参阅caniuse.com）。

更新（21/05/2019）：Chrome just announced backdrop-filter可用于镀铬金丝雀，而无需启用＆＃34;启用实验性网络平台功能＆＃34;旗。这意味着backdrop-filter非常接近在所有Chrome平台上实施。

来自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。

Answer 4

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

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

Answer 6

以下是纯CSS中现代浏览器的简单解决方案，其中包含＆＃39;之前＆＃39;伪元素，就像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 */
}

Answer 7

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

Answer 8

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

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

修改

我终于让它运转了，但解决方案绝不是直截了当的！见这里：

filter: blur(1px); doesn't work in firefox, IE, and opera

Answer 9

当然，这不是CSS解决方案，但您可以将CDN Proton与filter一起使用：

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

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

Answer 10

您实际需要的只是“过滤器”：

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>

Answer 11

您可以在要应用过滤器的图像上创建一个div，并将backdrop-filter用于其CSS类。检出this link

Answer 12

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>

Answer 13

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

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

说明

该卡包含在<div>类包装中，这是一个弹性箱。
卡片由两个元素组成，图像也是一个链接和内容。
找到了链接<a>，类链接相对
该链接包含两个子元素，一个占位符<div>类模糊和一个<img>类 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>

Answer 14

＆＃13;

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

＆＃13;

Answer 15

我没有写这个，但是我注意到使用CSS SASS编译器为部分受支持的backdrop-filter提供了一个polyfill，因此，如果您有编译管道，可以很好地实现（它也使用TypeScript）：

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

Answer 16

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

Answer 17

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

Answer 18

不使用伪类from

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>

Answer 19

如果要将内容设置为可滚动，请将内容的位置设置为绝对：

content {
   position: absolute;
   ...
}

我不知道这是否只适合我，但如果不是那就是修复！

同样，因为背景已修复，这意味着你有“视差”效果！所以现在，这个人不仅会教你如何制作模糊的背景，而且还会产生视差背景效果！

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

19 个答案:

更新

您还可以使用`backdrop-filter`

说明

代码

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

19 个答案:

更新

您还可以使用backdrop-filter

说明

代码

您还可以使用`backdrop-filter`