lovelmh13/myBlog

背景变暗与毛玻璃效果

Opened this issue · 0 comments

lovelmh13 commented

使用渐变属性让背景变暗：
linear-gradient
使用伪元素做到只让背景图有毛玻璃效果，不影响其他的元素。配合 z-index 让伪元素在下面。

html 结构如下：

image

.live-mask-container {
    z-index: 99;
    background: linear-gradient(
        rgba(0, 0, 0, 0.7),
        rgba(0, 0, 0, 0.7)
    ), url('https://pic.lehe.com/pic/_o/39/99/299009b83cb8012dcea7efdcdc8e_268_268.cz.jpg') center no-repeat;
    &:after{
      content: "";
      width:100%;
      height:100%;
      position: absolute;
      left:0;
      top:0;
      background: inherit;
      filter: blur(5px);
      z-index: -1; /* -1 是因为其他的 mask-header、mask-center 等元素没有 z-index, 所以要让 :after 变成 0 以下*/
    }
 
 
}

如果使用 opacity 修改背景图片的透明度达到使背景变暗的效果，则会与 filter 属性有一些冲突。

效果如下：

image