css3 背景高斯模糊 并添加遮照

作者: wxfeng 分类: web前端 发布时间: 2018-12-04 00:00
.d1{
  background-image:url("图片url");
   background-size:100% 100%;
   -webkit-filter:blur(10px);
   filter:blur(10px);
   z-index:-1;
   width:100%;
   height:39%;
   position:fixed; 
   _position:absolute; 
   background-repeat:no-repeat;
}
.d2{
   background:#222222; opacity: 0.7;
   background-size:100% 100%;
   -webkit-filter:blur(10px);
   filter:blur(10px);
   z-index:-1;
   width:100%;
   height:39%;
   position:fixed; 
   _position:absolute; 
   background-repeat:no-repeat;
}
.itemlist{
  width:100%;
  float:left;
  border-bottom: 1px solid #eeeeee;
  background:#222222; opacity: 0.7;
}

<div class="d1"> 放置背景图</div>

<div class="d2"> 遮照层</div>

<div class="itemlist"> 文字内容</div>

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注