html中如何使得改变背景的透明度时，背景上的文字透明度不被改变 

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2         "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5     <title></title>
 6     <style type="text/css">
 7         .div1{
 8             width: 150px;
 9             height: 150px;
10             background-color: #000001;
11             text-align: center;
12             /*透明度*/
13             opacity: 0.5;
14 
15         }
16         span{
17             color: red;
18             font-size: 18px;
19             padding-top: 60px;
20         }
21     </style>
22 </head>
23 <body>
24 <div class="div1">
25     <span>不改变文字的透明度</span>
26 </div>
27 </body>
28 </html>

使用opacity改变背景的透明度时，背景上的文字的透明度也会发生改变。为了使文字的颜色不发生改变，我们使用background-color: rgba();

background-color: rgba(a,b,c,a);三个参数依次为（R G B 透明度）的参数

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2         "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5     <title></title>
 6     <style type="text/css">
 7         .div1{
 8             width: 150px;
 9             height: 150px;
10             text-align: center;
11             background-color: rgba(0,0,1,0.5);
12 
13         }
14         span{
15             color: red;
16             font-size: 18px;
17             padding-top: 60px;
18         }
19     </style>
20 </head>
21 <body>
22 <div class="div1">
23     <span>不改变文字的透明度</span>
24 </div>
25 </body>
26 </html>

 

posted @ 2017-12-02 15:48  ztt_tttt  阅读(19671)  评论(0)  编辑  收藏  举报