主页 / 建站知识 /

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

建站知识 2021-07-03 07:54www.168986.cn长沙网站建设

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

html代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="cover">
  <h1>我是需要突出显示的内容
</div>
</body>
</html>

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

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

可能会造成狼蚁网站SEO优化的这种情况。

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

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

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

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

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

上一篇：css实现中间文字两边横线效果 下一篇：css实现“加号”效果的实例代码

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by