【原】CSS實現背景透明，文字不透明，兼容全部瀏覽器

時間 2019-12-05

原文原文鏈接

11.11是公司成立的日子，16歲啦，我呢3歲半，感謝公司給了這樣一個平臺，讓我得以學習和成長，這裏祝願公司發展愈來愈好~php

進入主題，每一年11月11號是光棍節，產生於校園，原本只是一流傳於年輕人的娛樂性節日，以慶祝本身還是單身一族爲驕傲，而現在是各大商家以脫光爲由打折促銷的時期，成爲了所謂的」購物節「，雙11也算了，後面還要搞雙12，不得不吐槽下。css

因而呢，熬夜加班作了11.11的活動，在PC端遇到了透明背景和透明圖片的問題，其實之前也遇到過，只是沒有總結起來，就忘記了，此次又撞牆了，必須記錄下來，一來給本身作個小總結，提個醒，最近變懶了，再不努力就要倒掛了；二來是由於在網絡上並無完整的解決方案，但願能夠幫助到遇到此類問題的朋友，今天主要講解背景透明的解決方案，共勉~html

重點內容入口：css3

測試瀏覽器：chrome

VirtIE六、虛擬機下XP的IE六、純正IE八、純正IE8下QQ瀏覽器、WIN7下的IE 9.0.32 、WIN8下的IE 10.0.2一、chrome 38.0 、QQ瀏覽器8.0-IE10.0.五、safari 5.1.七、opera 25.0瀏覽器

如何實現背景透明，文字不透明，兼容全部瀏覽器？

咱們平時所說的調整透明度，其實在樣式中是調整不透明度，以下圖所示例：網絡

打開ps，在圖層面板上，能夠看到設置圖層整理不透明度的菜單，從 0% （徹底透明）到 100%（徹底不透明）。學習

實現透明的css方法一般有如下3種方式，如下是不透明度都爲80%的寫法測試

css3的opacity:x，x 的取值從 0 到 1，如opacity: 0.8
css3的rgba(red, green, blue, alpha)，alpha的取值從 0 到 1，如rgba(255,255,255,0.8)
IE專屬濾鏡 filter:Alpha(opacity=x)，x 的取值從 0 到 100，如filter:Alpha(opacity=80)

css3的opacity

兼容性：IE六、七、8不支持，IE9及以上版本和標準瀏覽器都支持字體

使用說明：設置opacity元素的全部後代元素會隨着一塊兒具備透明性，通常用於調整圖片或者模塊的總體不透明度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
*{
    padding: 0;
    margin: 0;
}
body{
    padding: 50px;
    background: url(img/bg.png) 0 0 repeat;
}
.demo{
  padding: 25px;
  background-color:#000000;
  opacity: 0.2;
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    

<div class="demo">
    <p>背景透明，文字也透明</p>
</div>

</html>

使用opacity後整個模塊都透明瞭，展示以下：

那麼使用opacity實現《背景透明，文字不透明》是不可取的。

css3的rgba

兼容性：IE六、七、8不支持，IE9及以上版本和標準瀏覽器都支持

使用說明：設置顏色的不透明度，通常用於調整background-color、color、box-shadow等的不透明度。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
*{
    padding: 0;
    margin: 0;
}
body{
    padding: 50px;
    background: url(img/bg.png) 0 0 repeat;
}
.demo{
  padding: 25px;
  background-color:#000000;/* IE6和部分IE7內核的瀏覽器(如QQ瀏覽器)下顏色被覆蓋 */
  background-color:rgba(0,0,0,0.2); /* IE6和部分IE7內核的瀏覽器(如QQ瀏覽器)會讀懂，但解析爲透明 */
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    

<div class="demo">
    <p>背景透明，文字也透明</p>
</div>

</html>

在background-color中使用rgba，標準瀏覽器中，背景透明，文字不透明，展示以下：

很奇葩的是，IE6和部分IE7內核的瀏覽器(如QQ瀏覽器)會讀懂rgba，解析後顏色爲透明，其實應該是null

那麼使用opacity實現背景透明，文字不透明是可取的。

IE專屬濾鏡 filter:Alpha(opacity=x)

使用說明：IE瀏覽器專屬，問題多多，本文以設置背景透明爲例子，以下：

僅支持IE六、七、八、9，在IE10版本被廢除
在IE六、7中，須要激活IE的haslayout屬性(如：*zoom:1或者*overflow:hidden)，讓它讀懂filter:Alpha
在IE六、七、8中，設置了filter:Alpha的元素，父元素設置position:static(默認屬性)，其子元素爲相對定位，可以讓子元素不透明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
*{
    padding: 0;
    margin: 0;
}
body{
    padding: 50px;
    background: url(img/bg.png) 0 0 repeat;
}
.demo{
  padding: 25px;
  background: #000000;
  filter:Alpha(opacity=50);/* 只支持IE六、七、八、9 */
  position:static; /* IE六、七、8只能設置position:static(默認屬性) ，不然會致使子元素繼承Alpha值 */
  *zoom:1; /* 激活IE六、7的haslayout屬性，讓它讀懂Alpha */
}
.demo p{
    color: #FFFFFF;
    position: relative;/* 設置子元素爲相對定位，可以讓子元素不繼承Alpha值，保證字體顏色不透明 */
}      

</style>
</head>
<body>    

<div class="demo">
    <p>背景透明，文字不透明</p>
</div>

全兼容的方案

上以上3點分析可知，設置透明背景文字不透明，可採用的屬性有rgba和IE的專屬濾鏡filter:Alpha，其兼容性以下圖所示：

針對IE六、七、8瀏覽器，咱們能夠採用fiter:Alpha，針對標準瀏覽器咱們採用rgba，那麼問題來了，IE9瀏覽器2個屬性都支持，一塊兒使用會重複下降不透明度...

那麼，如何只對IE六、七、8使用fiter:Alpha如何實現呢？2年前寫過《CSS hack整理》一文，最新我也作了點更新，裏面有IE的相關hack，找到只支持IE 六、七、8的方案，以下：

/* 只支持IE六、七、8 */

@media \0screen\,screen\9 {...}

ok，全部問題都解決了，所有代碼以下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明，文字不透明</title>
<style>
*{
    padding: 0;
    margin: 0;
}

body{
  padding: 50px;
  background: url(img/bg.png) 0 0 repeat;
}

.demo{
  padding: 25px;
  background-color: rgba(0,0,0,0.5);/* IE九、標準瀏覽器、IE6和部分IE7內核的瀏覽器(如QQ瀏覽器)會讀懂 */
}
.demo p{
  color: #FFFFFF;
}
@media \0screen\,screen\9 {/* 只支持IE六、七、8 */
  .demo{
    background-color:#000000;
    filter:Alpha(opacity=50);
    position:static; /* IE六、七、8只能設置position:static(默認屬性) ，不然會致使子元素繼承Alpha值 */
    *zoom:1; /* 激活IE六、7的haslayout屬性，讓它讀懂Alpha */
  }
  .demo p{
    position: relative;/* 設置子元素爲相對定位，可以讓子元素不繼承Alpha值 */
  }  
}

</style>
</head>
<body>    

<div class="demo">
    <p>背景透明，文字不透明</p>
</div>

</html>

下載demo

可能不少同窗會以爲很複雜，爲何不直接用兩個DIV放在同一個位置就好了，一個不透明DIV，一個文字DIV，很簡單的解決問題，這也是好個方法，可是須要寫絕對定位或負margin，並出現空內容的DIV，並且這是這種方法在有些場景下也會顯得複雜，以下示例，鼠標通過商標後展示展示透明的提示文案，就須要控制2個DIV啦~

一點思路，若是疑問，歡迎你們留言交流~