如何实现文字背景图透明且文字不受影响

原创 leechee 随笔 CSS 72阅读 26 天前 举报
首先,我们需要把背景图片变成透明,即:opacity:(0~1);however,与此同时衍生出的问题是,字元素的透明度也会受到影响。于是乎,我们只要转变一下思路就好啦~利用定位的盒子解决。
第一步:将外层父元素设置position:relative;
第二步:将赋予背景图片的子元素设置position:absolute;width:100%;height:100%;opacity:(0~1);(注意设置合适的背景图片大小)
第三步:将其他同级子元素(即需要展示的文字)设置position:relative;z-index:正数。
Bingo,完成~

效果图:

代码如下:
<div class="father">
<div class="back-child"></div>
<div class="other-child" >党的十九大的主题:不忘初心,牢记使命,高举中国特色社会主义旗帜,决胜全面建成小康社会,夺取新时代中国特色社会主义伟大胜利,为实现中华民族伟大复兴的中国梦不懈奋斗。</div>
</div>
css:
.father{
position:relative
}
.back-child{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
opacity:0.2;
backgroundSize:200px 100px;
backgroundImage:url('https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/810a19d8bc3eb1357330eea0a41ea8d3fd1f4431.jpg')";
}
.other-child{
position:relative;
z-index:10;
padding:10px
}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复