Question

我试图在没有文字的情况下模糊背景img，但文字也变得模糊。这是一个bootstrap-ui-angular模态。它应该很容易，但我无法让它发挥作用。

css代码：

.test:before{
    content: "";
    z-index: -1;

    display: block;
    background: url("../images/3.jpg");

    -webkit-filter: blur(5px);
    filter: blur(5px);


}
.test{
    z-index: 0;
}

html代码：

<form ng-submit="ok()" class="test">
    <div class="modal-header col-lg-12">
        <h3 class="col-lg-4 col-lg-offset-4">{{selectedCard.monitorName}}</h3>
    </div>
    <div class="modal-body">
        <div class="panel-body">
            <div class="form-group">
                <label class="card-lable">kind</label>
                <p class="card-p">{{selectedCard.monitorType}}</p>
            </div>
            <div class="form-group">
                <label class="card-lable">proc</label>
                <p class="card-p">{{selectedCard.monitorProdact}}</p>
            </div>
            <div class="form-group">
                <label class="card-lable">sys</label>
                <p class="card-p">{{selectedCard.monitorSystem}}</p>
            </div>
            <div class="form-group">
                <label class="card-lable">ex</label>
                <p class="card-p">{{selectedCard.monitorExplain}}</p>
            </div>
        </div>
        <div class="modal-footer ">
            <button type="submit" class="btn btn-success col-lg-4 col-lg-offset-4">X</button>
        </div>
    </div>
</form>

Answer 1

尝试这个，它来自另一个SO帖子，但它在我的本地测试中起作用： http://codepen.io/aniketpant/pen/DsEve

参考：How to apply a CSS 3 blur filter to a background image

尝试将它放在你不需要的其他课堂上：＆＃39;之前＆＃39; 为图像添加模糊类并给它一个镜头

img.blur {
  filter: blur(20px);
}

检查可比性，但不确定您支持的是什么，但这可能是您的问题： http://caniuse.com/#feat=css-filters

也参考这个，很棒的指南： https://css-tricks.com/almanac/properties/f/filter/

Answer 2

它们应该在表单中的两个div中。一个用于文本，一个用于图像。两者都必须绝对位置。您可能不得不弄乱他们的订单，因为您希望带有图像的div在文本后面的div后面。

然后只在图像DIV上使用该类。

希望有所帮助。

如何模糊背景img - css？

2 个答案: