CSS實例:如何用CSS實現背景半透明


  如何用CSS實現背景半透明效果?做過活動頁面的同學可能會碰到要做背景半透明的效果,我們一般的做法是用兩個層,一個用於放文字,另一個用於做透明背景,因為透明濾鏡的效果會影響到里面的內容。不過假如你只需求在IE下實現,我們有更簡單的做法:

  HTML代碼:

  示例代碼 [www.mb5u.com]

  背景為紅色(#FF0000),透明度20%.鞍山治療牛皮癬的醫院www.0412n.com

  CSS代碼:

  示例代碼 [www.mb5u.com]

  .alpha1{

  width:300px;

  height:200px;

  background-color:#FF0000;

  filter: Alpha(Opacity=30);

  }

  .ap2{

  position:relative;

  }

  這樣基本就可以實現啦,也不用擔心定位和自適應問題,最大的問題是僅IE支持。

  假如兼容FF、OP怎么寫呢?首先,上面這種定法是不行的啦,那就只能用兩個層重疊的方法啦。

  改下頁面結構與CSS樣式:

  HTML代碼:

  示例代碼 [www.mb5u.com]

  背景為紅色(#FF0000),透明度20%。

  CSS代碼:

  示例代碼 [www.mb5u.com]

  .alpha1,.alpha2{

  width:100%;

  height:auto;

  min-height:250px;/* 必需 */

  _height:250px;/* 必需 */

  overflow:hidden;

  background-color:#FF0000;/* 背景色 */

  }

  .alpha1{

  filter:alpha(opacity=20); /* IE 透明度20% */

  }                       鞍山治療銀屑病的醫院www.0412n.com

  .alpha2{

  background-color:#FFFFFF;

  -moz-opacity:0.8; /* Moz FF 透明度20%*/

  opacity: 0.8; /* 支持CSS3的瀏覽器(FF 1.5也支持)透明度20%*/

  }

  .ap2{

  position:absolute;

  }


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM