css 背景图片模糊遮罩效果

最新推荐文章于 2023-09-22 15:15:55 发布

ttt唐老鸭

最新推荐文章于 2023-09-22 15:15:55 发布

阅读量1.8k

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/qq_42339350/article/details/113773852

版权

css 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

思路

在父元素上之上利用绝对定位再加一个图层并调整该图层的透明度

顺便一提：熟悉ps或pr的应该知道这图层叫做遮罩或者蒙版

方法利用:after伪元素

dom元素


 <div className={styles.headerWrapper}>
     <div className={styles.header}> </div>
 </div>

css代码

.headerWrapper{
	  background-size: cover;
	  background:  url("../../../assets/img/homgPageBg.jpg") no-repeat center fixed;
	  position: relative;
	  z-index: 1;
	  &:after{
	    content: "";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    filter: blur(1px);
	    background-color: rgba(0, 0, 0 ,0.3);
	    z-index: -1;
	  }
   }

注意点：