CSS设置背景模糊的实现方法

在做一些页面的时候，为了让页面更好看，我们常常需要设置一些背景图片，但是，当背景图片太过花哨的时候，又会影响我们的主体内容，所以我们就需要用到 filter 属性来设置他的模糊值。

ht ML 代码如下

<!DOCTY PE  html>
<html>
<head>
  < ;m eta charset="utf-8">
  <meta n am e="viewport" content="width=device-width">
  <t IT le>JS Bin</title>
</head>
<body>
<div class="cover">
  < h1 >我是需要突出显示的内容
</div>
</body>
</html>

但是如果直接在背景图片上使用的话，

.cover{
    width:600px;
    h ei ght:300px;
    position:relative;
    text-align: center ;
    line-height:300px;
    color:white;
    background:transparent url(http://91jean.oss-cn-hangzhou.aliyuncs .COM /18-8-31/16567303. jpg ) center center no-repeat;
    filter:blur(5px);
     background-size :cover;
}

可能会造成下面的这种情况。

我们会发现背景和主体内容都变糊了。

解决办法：给背景图片增加一个伪元素，将背景图片和 filter 属性设置在伪元素上，具体代码如下

.cover{
    width:600px;
    height:300px;
    position:relative;
    text-align:center;
    line-height:300px;
    color:white;
}

.cover :: before{    
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:600px;
    height:300px;
    background:transparent url(http://91jean.oss-cn-hangzhou.aliyuncs测试数据/18-8-31/16567303.jpg) center center no-repeat;
    filter:blur(5px);
    z -i ndex:-1;
    background- Size: cover;
}

总结

以上所述是小编给大家介绍的CSS设置背景模糊的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

总结

以上是为你收集整理的 CSS设置背景模糊的实现方法全部内容，希望文章能够帮你解决 CSS设置背景模糊的实现方法所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于CSS设置背景模糊的实现方法的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did200693

更新时间：2023-04-27 阅读：31次