欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP，暢享免費電子書(shū)等14項超值服

開(kāi)通VIP

首頁(yè)

好書(shū)

留言交流

下載APP

聯(lián)系客服
css 背景透明，文字不透明，alpha濾鏡，opacity，position:relat...

都知道，在alpha濾鏡下，背景透明了，里面的文字也會(huì )跟隨透明，我們可以設置內容的position為relative可以解決這個(gè)問(wèn)題

但是在position為absolute這么做卻沒(méi)有效果，怎么解決呢，看代碼：

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk" />  
  5. <title>alpha</title>  
  6. <style type="text/css">  
  7. .alpha  
  8. {  
  9.  width:100px;  
  10.  height:100px;  
  11.  background-color:red;  
  12.  display:block;  
  13.  opacity: 0.35;  
  14.  filter: "alpha(opacity=35)";  
  15.  filter: alpha(opacity=35);  
  16.  -moz-opacity: 0.35;  
  17. }  
  18. </style>  
  19. </head><body>  
  20.     <div class="alpha">  
  21.      <div>文字顯示</div>  
  22.     </div>  
  23. </body>  
  24. </html>  

這樣顯示的文字也是0.35的透明，修改代碼如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk" />  
  5. <title>alpha</title>  
  6. <style type="text/css">  
  7. .alpha  
  8. {  
  9.  width:100px;  
  10.  height:100px;  
  11.  background-color:red;  
  12.  display:block;  
  13.  opacity: 0.35;  
  14.  filter: "alpha(opacity=35)";  
  15.  filter: alpha(opacity=35);  
  16.  -moz-opacity: 0.35;  
  17. }  
  18. </style>  
  19. </head>  
  20. <body>  
  21.     <div class="alpha">  
  22.      <div style="position:relative;"> 文字顯示</div>  
  23.     </div>  
  24. </body>  
  25. </html>  


文字沒(méi)有了不透明效果

這沒(méi)什么，也不是我要說(shuō)的重點(diǎn)

看這個(gè)

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4.     <title></title>  
  5.     <style type="text/css">  
  6.         .alpha50  
  7.         {  
  8.             opacity: 0.5;  
  9.             filter: "alpha(opacity=50)";  
  10.             filter: alpha(opacity=50);  
  11.             -moz-opacity: 0.5;  
  12.         }  
  13.   
  14.         .box  
  15.         {  
  16.             width: 173px;  
  17.             height: 163px;  
  18.             display: block;  
  19.             background-color: orange;  
  20.         }  
  21.   
  22.         .absolute  
  23.         {  
  24.             position: absolute;  
  25.             width: 173px;  
  26.             height: 30px;  
  27.             margin-top: 133px;  
  28.         }  
  29.   
  30.         .relative  
  31.         {  
  32.             position: relative;  
  33.         }  
  34.     </style>  
  35. </head>  
  36. <body>  
  37.     <form id="form1" runat="server">  
  38.         <div>  
  39.             <div class="box">  
  40.                 <div class="absolute alpha50">  
  41.                     <div class="relative">顯示文字</div>  
  42.                 </div>  
  43.             </div>  
  44.         </div>  
  45.     </form>  
  46. </body>  
  47. </html>  


雖然設了relative，但文字還是透明的

反復試驗 我發(fā)現修改代碼順序可以解決這個(gè)問(wèn)題

如下：

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4.     <title></title>  
  5.     <style type="text/css">  
  6.         .alpha50  
  7.         {  
  8.             opacity: 0.5;  
  9.             filter: "alpha(opacity=50)";  
  10.             filter: alpha(opacity=50);  
  11.             -moz-opacity: 0.5;  
  12.         }  
  13.   
  14.         .box  
  15.         {  
  16.             width: 173px;  
  17.             height: 163px;  
  18.             display: block;  
  19.             background-color: orange;  
  20.         }  
  21.   
  22.         .absolute  
  23.         {  
  24.             position: absolute;  
  25.             width: 173px;  
  26.             height: 30px;  
  27.             margin-top: 133px;  
  28.         }  
  29.   
  30.         .relative  
  31.         {  
  32.             position: relative;  
  33.         }  
  34.     </style>  
  35. </head>  
  36. <body>  
  37.     <form id="form1" runat="server">  
  38.         <div>  
  39.             <div class="box">  
  40.                 <div class="absolute">  
  41.                     <div class="alpha50">  
  42.                         <div class="relative">顯示文字</div>  
  43.                     </div>  
  44.                 </div>  
  45.             </div>  
  46.         </div>  
  47.     </form>  
  48. </body>  
  49. </html>  

 

先absolute再alpha可以解決在absolute下設置relative的不透明度

ok

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。
打開(kāi)APP，閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
Div+Css網(wǎng)頁(yè)布局之定位篇--Postion屬性詳解
請教CSS中的position:relative;的作用。
div+Css示例
理解CSS浮動(dòng)float、定位position
一篇文章帶你了解CSS Opacity(透明度)
收藏 不顯示刪除回復顯示所有回復顯示星級回復顯示得分回復 datalist環(huán)境下,如何解決JavaScript鼠標經(jīng)過(guò)切換圖片
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導長(cháng)圖 關(guān)注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久