CSS设定情况模糊不清的完成方式

日期：2021-01-20 类型：科技新闻我要分享

关键词：秀米制作h5，h5如何制作，h5小游戏制作，h5游戏开发，免费的h5制作网站

在做1些网页页面的情况下，以便让网页页面更漂亮，大家经常必须设定1些情况照片，可是，当情况照片太过花梢的情况下，又会危害大家的行为主体內容，因此大家就必须用到 filter 特性来设定他的模糊不清值。

html编码以下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf⑻">
  <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-cn-hangzhou.aliyuncs.com/18⑻⑶1/16567303.jpg) center center no-repeat;
    filter:blur(5px);
    background-size:cover;
}

将会会导致下面的这类状况。

大家会发现情况和行为主体內容都变糊了。

处理方法：给情况照片提升1个伪元素，将情况照片和 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.com/18⑻⑶1/16567303.jpg) center center no-repeat;
    filter:blur(5px);
    z-index:⑴;
    background-size:cover;
}

总结

以上所述是网编给大伙儿详细介绍的CSS设定情况模糊不清的完成方式，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！