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

本文轉載自查看原文 2017-12-02 15:48 13137 background-color/ h5

 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html之改變圖片透明度而不改變文字的透明度--兩種方法實現 JS實現背景透明度可變，文字不透明的效果改變PNG圖片的透明度 delphi css 背景顏色透明度如何設置一個div的背景透明度 css中如何設置透明度 Unity3D（一）改變一個物體的透明度（轉） css 背景圖片增加透明度 CSS中如何設置父元素透明度不影響子元素透明度 CAD軟件中如何設置透明度？CAD透明度設置教程