1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > css实现单色或图片背景透明 而文字不透明的方法

css实现单色或图片背景透明 而文字不透明的方法

时间:2021-12-06 14:21:50

相关推荐

css实现单色或图片背景透明 而文字不透明的方法

一.单色背景

方法: 不使用opacity属性,而是使用rgba

例子:

<style>.bg {background-color:rgba(0,0,0,0.4)}</style><div class="bg">背景是透明度0.4的黑色,文字不透明</div>

效果:

二.图片做背景

方法1: 将图片跟文字设置成兄弟关系,对图片设置opacity属性,把文字设置成绝对定位,然后将其定位到图片上

例子:

<style>.bg-box {position:fixed;top: 0;}.bg {position:absolute; background:url('图片地址') no-repeat;height:100px; width:400px; opacity:0.4}.font-text {position:absolute; height:100px; width:400px;}</style><div class="bg-box"><div class="bg"></div><div class="font-text">背景是透明度0.4的图片,文字不透明</div></div>

效果:

方法2: 这个可以说不属于css的范围,只要叫你的ui把图片导出为半透明的就行了…

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。