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>