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设定情况模糊不清的完成方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:css特性提升 返回下一篇:没有了