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>
时间： 2024-10-12 13:39:42