Question

我正在尝试将CSS blur属性仅应用于id="home"的背景图像，但它也反映在子类中。我的HTML代码是：

<section id="home">            
    <div class="home">
        <h1>ncats is an innovative</h1>
    </div>             
</section>

我的CSS代码是：

#home{
    display: block;
    background:url(../images/2.jpg) no-repeat;
    background-size: cover;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    width: 100%;
    height: 1080px;
}
.home{
    text-align:center;
}

我正在尝试获得如下链接中的输出： http://codepen.io/akademy/pen/FlkzB

但我的输出是这样的，而不是：http://codepen.io/anon/pen/yyEZOb

Answer 1

我让你的Codepen使用以下CSS：

#home:before{
    content: ""; /* CHANGE HERE! */
    position: absolute; /* CHANGE HERE! */
    z-index: -1; /* CHANGE HERE! */

    display: block;
    background:url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat;
    background-size: cover;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    width: 100%;
    height: 1080px;
}
.home{    
  text-align:center;
  z-index: 0; /* CHANGE HERE! */
}

添加＆＃39;：之前＆＃39;伪元素，用于指定在选择元素之前插入内容（#home）。

将位置设置为绝对值并更改z-indices非常重要，因为我们必须重新排列元素。

更多信息：在伪元素之前

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

有关z-index的更多信息：

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

也许你可以使用opacity相关属性而不是webkit-filter选项：

#home{
    display: block;
    background:url('imageurl') no-repeat;
    background-size: cover;

    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;

    width: 100%;
    height: 1080px;
}

Answer 3

要获得与您共享的codepen类似的输出，您必须使用相同的技术并使用:before或:after之类的伪元素。

只需按以下方式更改CSS：

#home:before{
  content:'';
  display: block;
  background:url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat;
  background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100%;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
  z-index:-1;
}

Answer 4

实际上你需要理解HTML div的块结构。无论您应用于父元素还是父母分组，都应用于子元素。所以如果这是你的代码

<div class="parent"> Hi... <div class="child"> i am child </div> </div>

现在，如果将css filter：blur属性应用于父类，它将对子类产生影响，因为父类/ div块包含其中的子类/ div块。所以无论你给父母什么，也会被孩子收养。

但仍有一种方法可以做到：JSFiddle。

说明：有一个div作为span，另一个作为单独的元素。这个div被赋予模糊，所以它的孩子也会受到影响，但是单独的跨度不是因为它不是那个div的孩子。

<强> HTML

<div class="bg">
   <span class="inner"> 
    <h1>Hey i am normal text above the Background, and i am "Blur" ! </h1>
   </span> 
</div>  

   <span class="outer"> 
    <h1>Hey i am normal text above the Background, and i am not "Blur" ! </h1>
   </span>

<强> CSS

html, body {
    color:white;
    margin:0%;
    position:relative;
    background:black;
}
.bg {
    margin:0%;
    background-image:url(http://upload.wikimedia.org/wikipedia/commons/1/12/Sling-Sat_removing_space_debris.png);
    background-repeat:no-repeat;
    background-size:cover;
    height:100%;
    width:100%;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    z-index:-1;
}
.inner {
    z-index:0;
    display:block;
    width:100%;
    height:100%;
    position:fixed;
    top:0%;
    overflow:auto;
    text-align:center;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
.outer {
    z-index:0;
    display:block;
    width:100%;
    height:100%;
    position:fixed;
    top:0%;
    overflow:auto;
    text-align:center;
    padding-top:50px;
}

Answer 5

对于未来的读者（以及现在的读者，不特别关心跨浏览器支持）：有一种CSS机制完全这个。

在滤镜效果规范中，滤镜定义为也可用作功能表示法，接受图像+过滤器列表。语法如下所示：

.El {
  background-image: filter(url(myImage.jpg), blur(5px));
}

...其中filter函数的第二个参数接受过滤器列表（与filter属性相同）。

可悲的是，到目前为止只有Safari实现了它 - 它在Safari 9中以-webkit-filter()发布，但有一些严重的错误，所以他们甚至没有宣布它是受支持的。它已经在WebKit中得到修复，并且将在下一版本的Safari（iOS 9.3 / Desktop Safari 9.1）中发布。

CSS blur属性仅适用于background-image

5 个答案: