如何避免在CSS中繼承不透明屬性？

-1

我有一個div元素，我在CSS文件中設置了opacity: 0.7;，因爲我希望它裏面的文本是不透明的。我在此div中顯示一些圖像，但圖像顯示爲具有繼承的不透明屬性。結果是不透明的圖像。如何避免在CSS中繼承不透明屬性？

是否有可能給圖像的CSS屬性不繼承其中包含它們的div的不透明度？如果不是，我怎樣才能避免圖像不透明？

謝謝。

2012-10-21 Masiar

你想通過設置「不透明度」來達到什麼目的？可以用'background-color'和'rgba'完成嗎？ –

[CSS不透明屬性]的可能重複（http://stackoverflow.com/questions/8237886/css-opacity-property） –

我想在div中的文本不透明。 Aaand沒有。沒有可能的重複，對不起。 – Masiar

如果您使用opacity允許文本有部分透明，則只需設置元素的color：

#elemId { 
    color: rgba(0,0,0,0.7); 
}

這可以讓你避免調整opacity屬性，應該可以在支持opacity屬性的所有瀏覽器中工作。

2012-10-21 20:03:17

可悲的是，這是行不通的。如果我刪除'opacity：0.7;'line並將'color：rgba（0，0，0，0）7）;文字變成黑色，並且它不是半透明/不透明的，因爲我想要它。我使用的是Chrome的最新版本，所以我不認爲這是瀏覽器問題... – Masiar

我不知道爲什麼，但我測試過，文本不透明，但沒有我想要的那樣多。我修改了你的建議：'color：rgba（0,0,0,0.55）;'它似乎工作。我不知道爲什麼，但通過這種方式，我可以實現類似於「不透明：0.7」的東西。非常感謝！ – Masiar

你很*非常歡迎，我很高興得到了幫助！ =） –

唯一的方法就是定位。這裏有一篇來自CSS技巧的精彩文章：http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

使用position: relative;和頂部的值來使元素彼此相交。

如果您只是想讓背景透明，那麼您可以在背景中使用rgba()值。

編輯：

這是一個瘋狂的想法。您可以使用PHP GD以灰色背景（使透明）呈現帶有白色文本的圖像，以便在正確的位置顯示。然後使用mask-box-image或mask-image CSS屬性並將其設置爲渲染圖像。

如果當然你的內容不是動態的，那麼你可以在Photoshop /任何程序中製作圖像。

從瀏覽器到GD渲染的反鋸齒不會相同，但如果您不想使用定位，它是最好的黑客技術。

2012-10-21 19:58:49 MLM

我不想這樣修改HTML。我正在尋找一個CSS解決方案，但謝謝。 – Masiar

@Masiar增加了涉及CSS和PHP的解決方案 – MLM

謝謝，這是一個有趣的解決方案，我喜歡它，因爲它很瘋狂，但我會用'color：'解決方案！反正+1 =） – Masiar

添加以下代碼在你的CSS

的z-index：111

它的工作原理。

2016-08-20 10:12:55

回答