本文主要是介绍css实现文字浮现，背景图片蒙版，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.效果图如下：
2.代码
方法一：
<div style="width:100%; position:relative;z-index:1; height: 100px;"><img src="@/assets/images/touxiang.png" style="width:100%; opacity:0.6; filter: alpha(opacity=60);"/><div style="width:100%;position:absolute;z-index:2;top:0; right:0;"><h2 style="color:#fff">文字</h2></div>
</div>
方法二：只提供了背景图蒙版，未涉及文字浮现代码
------------html-----------<div class="myBgBox"><div class="bgImg"/><div class="bgImg"></div><div class="bgBlurred"></div>
</div>
------------css------------
.myBgBox{background: url("~@/assets/images/touxiang.png"); height: 100px;position: relative;.bgImg{z-index: 0;filter: blur(3px);width: 100%;height: 100%;background-size: cover;background-position: center;position: absolute;background-repeat: no-repeat;}.bgBlurred{width: 100%;height: 100%;position: absolute;background: rgba(0, 0, 0, 0.5);}
}
这篇关于css实现文字浮现，背景图片蒙版的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
