css怎么可以只让背景透明 文字不透明
1、首先新建一个html文件,添加一个DIV,设置宽度和高度,以及背景色填充为红色。
2、然后在父级DIV中插入一个子DIV,定义它的宽高,以及背景色(background:#fff;)。
3、然后添加一个透明度的代码(opacity:0.6),保存后预览下效果,背景已经实现透明了,但是文字也透明了。
4、熟悉PS的同学应该都知道,在图层的上方,有个不透明度,把PS中图层不透明度设置为60%,就和网页中的效果一样了,他们是一个数值。
5、把刚才的背景色和不透明度代码删除,换个代码【background-color:rgba(255,255,255,0.6);】。
6、保存后看下效果,已经变成了背景透明,文字不透明啦。
7、其中255,255,255就是PS中的拾色器里的数值啦。
8、0.6同第一种方式是一个含义。
背景使用rgba的方式,然后使用滤镜兼容一些令人反感的浏览器,比如IE
<html>
<head>
<title>rgba的兼容样式</title>
<style type="text/css" rel="stylesheet">
* { margin:0px;padding:0px;border:0px;font-family:'Microsoft YaHei','PingFang SC';font-size:12px;color:#333;}
.d_rgba { width:200px;height:200px;color:#fff;background-color:rgba(0,0,0,0.3);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);}
</style>
</head>
<body>
<div class="d_rgba">
这个过程中需要考虑到div中的元素的透明度不能改变
</div>
<p>
//一般的高级浏览器都支持
background: rgba(255,255,255,0.1);
</p>
<p>
//IE8下
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);
</p>
<p>
第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。
这个颜色“#19ffffff”是由两部分组成的。
第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如运行截图所示。
第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff;就是白色。
</p>
</body>
</html>
background:rgba(255,255,255,0.7)
如果背景是单色的,可不用css的透明属性(即opacity),而是使用透明色(利用rgba函数),比如:
<div style="background-color:rgba(255,255,255,0.5)">背景是透明度0.5的红色,文字不透明</div>
如果背景是图片,则可以把背景和文字分别做成两个兄弟关系(而不是父子关系)的层,然后把背景层做成透明,再把文字层覆盖在背景层上即可,比如:
<div style="position:relative">
<div style="position:absolute; background:url(图片网址自己改) no-repeat; height:40px; width:300px; opacity:0.5"></div>
<div style="position:absolute">背景是透明度0.5的图片,文字不透明</div>
</div>