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

最新推荐文章于 2023-03-08 13:09:18 发布

烂笔头.

最新推荐文章于 2023-03-08 13:09:18 发布

阅读量1.8k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/xfcy1990/article/details/88874714

版权

Web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<style>
.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;
    }
    </style>
    <div class="d1"> 放置背景图</div>
    
    <div class="d2"> 遮照层</div>
    
    <div class="itemlist"> 文字内容</div>