html5背景透明文字不透明(css设置背景透明,文字不透明)
htmlcss 中让一个DIV的背景色是透明的,但它的内容文字图片之类的不是透明的,这个的话,是可以通过设置2个div来实现的,第一个包裹着第二个div然后在设置相同的div宽高,在将第一个的opacity为0代码如下ltdiv。
1首先我们新建一个html文件,添加一个DIV,设置宽度和高度,以及背景色填充为红色2然后在父级DIV中插入一个子DIV,定义它的宽高,以及背景色3然后我们添加一个透明度的代码opacity064在图层的上方。
1先打开一张背景图片2再在背景图上面写上想写的字3将背景图片图层拖放在文字图层的上面4选中背景图图层,然后再按下“CTRL不放,同时再用鼠标单击背景图图层”,此时背景图图层已经被“闪动的虚线包围”。
取值从0到1,设为1就是不透明了,这里设置为07即可3最后保存文件来到浏览器,就可以看出效果了,有透明色的字体明显要比没加透明的字体要淡一些以上就是设置 html 字体颜色为透明色的方法。
ltdiv style=quotbackgroundcolor rgba0,0,0,03quot这是一个盒子的内容ltdiv 用以下方法可以将标签的背景颜色设置为半透明CSS rgba 函数教程。
lt!DOCTYPE htmllthtml lang=quotenquotlthead ltmeta charset=quotUTF8quot lttitleLOLlttitle ltstyle html, bodymargin 0 padding 0 color #fff backgroundcolor red width 100% height。
2在indexhtml中的ltstyle标签中,对“article”添加样式opacity 05,对“article p”添加样式opacity 13浏览器运行indexhtml页面,此时背景是50%透明度,但字体是不透明的。