如何在透明度上獲取不透明的文本div？

我在谷歌做了一些搜索，有很多不同的例子，有些過時了一些沒有。如何在透明度上獲取不透明的文本div？

我也看過http://www.w3schools.com/Css/css_image_transparency.asp底部的例子，它與我想要實現的類似。在這個例子中，div上的文字也有點透明，但很難看到，因爲它是白色div上的黑色文本。

我有一個背景圖片，裏面有很多黑色元素，最上面有一個黑色的div，55％的不透明度，當我在背景圖片的一些非常暗的元素上添加白色文本時通過我不想要的白色文本略微可見。

任何人有最近的例子/最佳做法如何實現這一點（透明PNG或CSS）？它不必支持IE 6 ..

在此先感謝。

2011-10-31 user997685

米蘭幾乎是正確的。你會想通過RGB使透明div的背景透明化。對於黑色將是（0,0,0）。要增加透明度，你只是一個小數（類似於加入「不透明度：0.55」的CSS，所以要得到一個55％不透明黑色的背景，你會使用

background: rgba(0,0,0,0.55);

因此，做出了榜樣DIV有55％的不透明度背景W /白文本，使用：

.blackopaque { 
    background:rbga(0,0,0,0.55); 
    color:#ffffff; 
}

的「背景」更改背景，顏色改變文本的顏色（白色，在這種情況下）希望這有助於！ Matt

編輯：IE瀏覽器端口 爲IE添加支持非常簡單，您只需針對IE用戶自定義該元素的樣式表即可。打開你的主題的頭文件，假設你有一個專門爲IE設計的樣式表，帶有透明的PNG以獲得透明的黑色效果，命名爲IE.css。你想插入這個代碼下面現有的CSS包含：

<!--[if IE]> 
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/IE.css" /> 
<![endif]-->

這種有條件的樣式表使自己只適用於IE用戶，所以的啊哈休息，更先進的瀏覽器都可以享受的RGBA。

對於IE瀏覽器的樣式表，你會想是這樣的：

.blackopaque { 
background:url('*link to your 55% opaque png file*') 
color:#ffffff; 
}

注意你只需要包含在IE瀏覽器的樣式表一個規則，只是使其覆蓋默認規則爲那個背景。

來源

2011-10-31 03:11:26 Matt

如果你能'檢查'我的答案是正確的，將不勝感激！ – Matt

嗨馬特，這在IE7中不起作用（還沒有測試過8和9），所以我也來看看米蘭的解決方案 – user997685

我更新了我的答案，使用RBGa爲新的瀏覽器的解決方案，和爲IE瀏覽器使用透明的PNG，我想這正是你想要的。 – Matt

對不起，我以爲文本應該是透明的，這裏是透明的背景

#content { 
    position:relative; 
    z-index:1; 
} 

#content:before { 
    content:""; 
    position:absolute; 
    z-index:-1; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    background:url(your_image.jpg); 
    opacity:0.7; 
}

來源

2011-10-31 03:04:14

Hi米蘭，這是相反的方式，我希望在背景上有不透明的div，但不是在我發佈的鏈接中的示例中獲得的文本。 – user997685

我已經改變了答案，沒有得到它第一次，對不起 –

直到IE9才支持RGBA，所以如果您需要支持早期版本的IE，您最好的選擇就是一個半透明的PNG。

來源

2011-10-31 03:12:27

如何在透明度上獲取不透明的文本div？

回答

相關問題