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>
|
广告 您可能关注的内容 |
