CSS實現背景透明文字不透明全-分類目錄網站

最新點入網站排行：

每次無論任何人從貴站點擊我站鏈接進入我站1次,貴站鏈接就自動在這里排到第1位

CSS實現背景透明文字不透明全

在div+css網站布局中，經常要用到背景透明，所在背景的文字內容也會跟著透明，但有時文字需求是不透明的，確實讓我們web前端開發者很苦惱，解決這個問題方法有二，第一背景用圖片，第二那就是用css來解決。

1.背景透明，文字也透明，以下代碼我們常用但不是我們想要的


filter:alpha(opacity=50);     //IE濾鏡，透明度50%

-moz-opacity:0.5;            //Firefox私有，透明度50%

opacity:0.5;                //其他，透明度50%

2.背景透明，文字不透明，這是我們想要的結果，全兼容各大瀏覽器的方法

先看下效果圖：

用CSS來實現背景透明文字不透明全兼容的方法

例子代碼如下：


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明，文字不透明</title>
<style>
*{padding:0;margin:0;}
body{padding:50px;}
.demo{padding:25px;background-color: rgba(0,0,0,0.5);}
/* IE9、標準瀏覽器、IE6和部分IE7內核的瀏覽器(如QQ瀏覽器)會讀懂 */
.demo p{color: #FFFFFF;}
/*征對IE9以下瀏覽器做兼容性處理*/
@media \0screen\,screen\9 {
    .demo{background-color:#000000;     
    /* 只支持IE6、7、8 */
    filter:Alpha(opacity=50);
    position:static;                
    /* IE6、7、8只能設置position:static(默認屬性) ，否則會導致子元素繼承Alpha值 */
    *zoom:1;                       
   /* 激活IE6、7的haslayout屬性，讓它讀懂Alpha */
  }
.demo p{position:relative;}     
/* 設置子元素為相對定位，可讓子元素不繼承Alpha值 */
}
</style>
</head>
<body>
<div class="demo">
   <p>背景透明，文字不透明</p>
</div>
</html>

點擊查看例子