如何使用CSS爲文本或圖像提供透明背景？

時間 2019-12-18

標籤如何使用 css 文本圖像提供透明背景欄目 CSS 简体版

原文原文鏈接

僅使用CSS，是否可使元素的background半透明，但元素的內容（文本和圖像）不透明？ css

我想在沒有文本和背景做爲兩個獨立元素的狀況下完成此操做。 html

嘗試時： css3

p { position: absolute; background-color: green; filter: alpha(opacity=60); opacity: 0.6; } span { color: white; filter: alpha(opacity=100); opacity: 1; }

<p> <span>Hello world</span> </p>

子元素彷佛受到其父級的不透明度的影響，所以opacity:1相對於父級的opacity:0.6 。瀏覽器

#1樓

這是個人操做方法（它可能不是最佳方法，但它能夠工做）： sass

建立要半透明的div 。給它一個類/ ID。將其留空，而後將其關閉。爲其設置高度和寬度（例如300像素乘300像素）。使其不透明度爲0.5或任何您喜歡的顏色，並提供背景色。 ide

而後，在該div的正下方 ，建立另外一個具備不一樣類/ id的div。在其中建立一個段落，在其中放置文本。給出div位置：相對和頂部： -295px （即295像素爲負）。將其z索引設置爲2以得到良好的度量，並確保其不透明度爲1。根據須要設置段落樣式，但請確保其尺寸小於第一個div的尺寸，以避免溢出。函數

而已。這是代碼： spa

.trans { opacity: 0.5; height: 300px; width: 300px; background-color: orange; } .trans2 { opacity: 1; position: relative; top: -295px; } .trans2 p { width: 295px; color: black; font-weight: bold; }

<body> <div class="trans"> </div> <div class="trans2"> <p> text text text </p> </div> </body>

這能夠在Safari 2.x中使用，但我不瞭解Internet Explorer。 ssr

#2樓

background-color：rgba（255，0，0，0.5）; 如上所述，這是最好的答案。要說即便在2013年使用CSS 3，也不是一件容易的事，由於各類瀏覽器的支持水平會隨着每次迭代而變化。 code

雖然全部主要瀏覽器都支持background-color （CSS 3並不陌生）[1]，可是alpha透明度可能會比較棘手，尤爲是對於版本9以前的Internet Explorer和版本5.1以前的Safari帶有邊框顏色。 [2]

使用Compass或SASS之類的東西確實能夠幫助生產和跨平臺兼容性。

[1] W3Schools：CSS背景顏色屬性

[2] 諾曼博客：瀏覽器支持清單CSS3（2012年10月）

#3樓

CSS 3能夠輕鬆解決您的問題。使用：

background-color:rgba(0, 255, 0, 0.5);

在此， rgba表明紅色，綠色，藍色和alpha值。因爲存在255，所以得到綠色值，而經過0.5 alpha值得到了一半的透明度。

#4樓

您能夠經過（ab）使用漸變語法來解決Internet Explorer 8的問題。顏色格式是ARGB。若是使用的是Sass預處理程序，則可使用內置函數「 ie-hex-str（）」轉換顏色。

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

#5樓

若是您是Photoshop專家，還可使用：

#some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

要麼：

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。