Question

我有一个使用Bootstrap 3的HTML代码。所以基本上我使用行和列进行布局。

现在我想在列中的文本背后给出像Blur一样的iOS。

透明度代码类似于：

.transparent{
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
  opacity: 0.4;
}

现在，我想在div中应用它：

<div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <h3>Some text. </h3>
        </div>

    </div>

我想模糊col-md-8区域。但不幸的是，我最终也模糊了文本。需要帮助。谢谢你们。

Answer 1

实际上，有一种方法可以找到您正在寻找的欲望效果，并且可以使用:pseudo元素。看看DEMO。

这是CSS。

div.con:before{
  content:'';
  position:absolute;
  display:inline-block;
  height:90px;
  width:100%;
  z-index:0;
  left:0;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  filter: blur(10px);
  background:url("http://lorempixel.com/400/200");
}

h1{
  position:relative; 
  color:gold;
}

<div class="con">
  <h1>Heading</h1>
</div>

Answer 2

不幸的是，模糊过滤器也将应用于子元素。你应该将文本分成另一个div，以避免模糊。

Answer 3

不幸的是，一旦你在父母身上设置过滤效果，它也会影响孩子，这太糟糕了，但是可以理解。我相信最好的方法是在.col-md-8 div中添加另一个div，将其设置为填充.col-md-8 div的宽度和高度，并添加模糊效果。 JS在这里小提琴：http://jsfiddle.net/k4o1p3u5/

<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div class="blur"></div>
        <h3>Some text. </h3>
    </div>

</div>

CSS：

 .blur{
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
  opacity: 0.7;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #ccc;
    display: block;
}

模糊对div的影响

3 个答案: