如何使用 CSS 為文本或圖像賦予透明背景？
[英]How do I give text or an image a transparent background using CSS?
問題描述
是否可以僅使用 CSS 使元素的background半透明但元素的內容（文本和圖像）不透明？
我想在不將文本和背景作為兩個獨立元素的情況下完成此操作。
嘗試時：
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相關。
29 個解決方案
解決方案1
2369 已采納
background-color: rgba(255, 0, 0, 0.5);
這是一篇來自 css3.info、 Opacity、RGBA 和折衷的文章 (2007-06-03)。
請注意，一旦底層背景發光，文本仍然需要與背景有足夠的對比度。
<p style="background-color: rgba(255, 0, 0, 0.5);"> <span>Hello, World!</span> </p>
解決方案2
484
在 Firefox 3 和 Safari 3 中，您可以像Georg Schölly 提到的那樣使用 RGBA。
一個鮮為人知的技巧是，您可以在 Internet Explorer 中使用它，也可以使用漸變過濾器。
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
第一個十六進制數定義顏色的 alpha 值。
完整解決方案所有瀏覽器：
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
這是來自CSS 背景透明度而不影響子元素，通過 RGBa 和過濾器。
結果截圖證明：
這是使用以下代碼時：
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css" media="all">
.transparent-background-with-text-and-images-on-top {
background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.6); /* RGBa with 0.6 opacity */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 5.5 - 7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* For IE 8*/
}
</style>
</head>
<body>
<div class="transparent-background-with-text-and-images-on-top">
<p>Here some content (text AND images) "on top of the transparent background"</p>
<img src="http://i.imgur.com/LnnghmF.gif">
</div>
</body>
</html>
解決方案3
117 2010-07-13 20:51:05
這是我能想到的最好的解決方案，不使用 CSS 3。據我所知，它在 Firefox、Chrome 和 Internet Explorer 上運行良好。
將一個容器div和兩個子div放在同一層，一個用於內容，一個用於背景。 並使用 CSS，自動調整背景大小以適應內容，並使用 z-index 將背景實際放在后面。
.container { position: relative; } .content { position: relative; color: White; z-index: 5; } .background { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: Black; z-index: 1; /* These three lines are for transparency in all browsers. */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: .5; }
<div class="container"> <div class="content"> Here is the content. <br/>Background should grow to fit. </div> <div class="background"></div> </div>
解決方案4
69 2010-05-24 16:07:51
對於簡單的半透明背景顏色，上述解決方案（CSS3 或 bg 圖像）是最佳選擇。 但是，如果你想做一些更花哨的事情（例如動畫、多背景等），或者你不想依賴 CSS3，你可以嘗試“窗格技術”：
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
}
.pane > .back {
position: absolute;
width: 100%; height: 100%;
top: auto; bottom: auto; left: auto; right: auto;
}
.pane > .cont {
position: relative;
z-index: 10;
}
<p class="pane">
<span class="back" style="background-color: green; opacity: 0.6;"></span>
<span class="cont" style="color: white;">Hello world</span>
</p>
該技術通過在外部窗格元素內部使用兩個“層”來工作：
- 一個（“背面”）適合窗格元素的大小而不影響內容的流動，
- 還有一個（“cont”）包含內容並幫助確定窗格的大小。
position: relative很重要； 它告訴后層適合窗格的大小。 （如果您需要<p>標記是絕對的，請將窗格從<p>更改為<span>並將所有內容包裝在絕對位置的<p>標記中。）
與上面列出的類似技術相比，該技術的主要優點是窗格不必是指定的大小。 如上所述，它將適合全寬（正常塊元素布局）並且僅與內容一樣高。 外部窗格元素可以任意調整大小，只要它是矩形的即可（即 inline-block 可以使用；plain-old inline 不行）。
此外，它還為您提供了很大的背景自由度； 您可以自由地將任何東西放在后面的元素中，並且不會影響內容的流動（如果您想要多個全尺寸子層，只需確保它們也有位置：絕對，寬度/高度：100%，和上/下/左/右：自動）。
允許背景插入調整（通過上/下/左/右）和/或背景固定（通過刪除左/右或上/下對之一）的一種變體是使用以下 CSS 代替：
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
正如所寫，這適用於 Firefox、Safari、Chrome、IE8+ 和 Opera，盡管 IE7 和 IE6 需要額外的 CSS 和表達式、IIRC，上次我檢查時，第二個 CSS 變體在 Opera 中不起作用。
需要注意的事項：
- 不會包含 cont 層內的浮動元素。 您需要確保它們被清除或以其他方式包含，否則它們會從底部滑出。
- 邊距在窗格元素上，填充在 cont 元素上。 不要使用相反的內容（cont 上的邊距或窗格上的 padding），否則您會發現頁面總是比瀏覽器窗口稍寬的奇怪現象。
- 如前所述，整個事情需要是塊或內聯塊。 隨意使用
<div>代替<span>來簡化您的 CSS。
一個更完整的演示，通過將它與display: inline-block以及auto和特定width s/ min-height s 一起使用來展示這種技術的靈活性：
.pane, .pane > .back, .pane > .cont { display: block; } .pane { position: relative; width: 175px; min-height: 100px; margin: 8px; } .pane > .back { position: absolute; z-index: 1; width: auto; height: auto; top: 8px; bottom: 8px; left: 8px; right: 8px; } .pane > .cont { position: relative; z-index: 10; } .debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); } .debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); } .debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;"> <span class="back debug_green"></span> <span class="cont debug_red"> Pane content.<br/> Pane content. </span> </p> <p class="pane debug_blue" style="float: left;"> <span class="back debug_green"></span> <span class="cont debug_red"> Pane content.<br/> Pane content.<br/> Pane content.<br/> Pane content.<br/> Pane content.<br/> Pane content.<br/> Pane content.<br/> Pane content.<br/> Pane content. </span> </p> <p class="pane debug_blue" style="float: left; display: inline-block; width: auto;"> <span class="back debug_green"></span> <span class="cont debug_red"> Pane content.<br/> Pane content. </span> </p> <p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;"> <span class="back debug_green"></span> <span class="cont debug_red"> Pane content.<br/> Pane content. </span> </p>
這是該技術被廣泛使用的現場演示：
解決方案5
61 2014-10-05 08:15:14
有一個技巧可以最小化標記：使用偽元素作為背景，你可以設置它的不透明度而不影響主元素及其子元素：
輸出：
相關代碼：
p { position: relative; } p:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: .6; z-index: -1; } /*** The following is just for demo styles ***/ body { background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat; background-size: cover; } p { width: 50%; padding: 1em; margin: 10% auto; font-family: arial, serif; color: #000; } img { display: block; max-width: 90%; margin: .6em auto; }
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie. <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" /> </p>
瀏覽器支持Internet Explorer 8及更高版本。
解決方案6
60
最好使用半透明的.png 。
只需打開Photoshop ，創建一個2x2像素的圖像（ 選擇1x1會導致 Internet Explorer 錯誤！ ），用綠色填充它並將“圖層選項卡”中的不透明度設置為 60%。 然后保存並使其成為背景圖像：
<p style="background: url(green.png);">any text</p>
當然，它很酷，但在可愛的Internet Explorer 6中除外。 有更好的修復可用，但這里有一個快速破解：
p {
_filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
解決方案7
23 2009-04-30 09:11:16
最簡單的方法是使用半透明背景PNG 圖像。
如果需要，您可以使用 JavaScript 使其在Internet Explorer 6中運行。
我使用Internet Explorer 6 中的透明 PNG 中概述的方法。
除此之外，您可以使用兩個並排的兄弟元素來偽造它 - 使一個 semi-transparent ，然后將另一個絕對定位在 top 上。
解決方案8
23 2012-01-14 00:14:59
此方法允許您在背景中擁有圖像而不僅僅是純色，並且可用於在其他屬性（例如邊框）上具有透明度。 不需要透明的PNG圖像。
在 CSS 中使用:before （或:after ）並給它們 opacity 值以使元素保持其原始不透明度。 因此，您可以使用 :before 制作一個人造元素並為其提供所需的透明背景（或邊框），並將其移動到您希望使用z-index保持不透明的內容后面。
一個例子（小提琴）（請注意，帶有類dad的DIV只是為了提供一些上下文和顏色對比，這個額外的元素實際上是不需要的，紅色矩形向下和向右移動一點以保持可見fancyBg元素背后的背景）：
<div class="dad">
<div class="fancyBg">
Test text that should have solid text color lets see if we can manage it without extra elements
</div>
</div>
使用這個 CSS：
.dad {
background: lime; border: 1px double black; margin: 1ex 2ex;
padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
border: 1px dashed black; position: relative; color: white; font-weight: bold;
z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
position: absolute; background: red; opacity: .5;
top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
/*top: 0; right: 0; bottom: 0; left: 0;*/
z-index: -1;
}
在這種情況下.fancyBg:before具有您希望具有透明度的 CSS 屬性（在此示例中為紅色背景，但可以是圖像或邊框）。 它被定位為絕對移動到.fancyBg后面（使用零值或更適合您需要的值）。
解決方案9
17 2011-01-26 16:36:16
幾乎所有這些答案都假設設計師想要純色背景。 如果設計師真的想要一張照片作為背景，那么目前唯一真正的解決方案是 JavaScript，比如其他地方提到的 jQuery Transify 插件。
我們需要做的是加入 CSS 工作組討論，讓他們給我們一個 background-opacity 屬性！ 它應該與多背景功能齊頭並進。
解決方案10
17 2009-04-30 09:14:40
問題是，在您的示例中，文本實際上完全不透明。 它在p標簽內完全不透明，但p標簽只是半透明的。
您可以添加一個半透明的 PNG 背景圖像而不是在 CSS 中實現它，或者將文本和 div 分成兩個元素並將文本移動到框上（例如，負邊距）。
否則就不可能了。
就像 Chris 提到的：如果您使用具有透明度的 PNG 文件，您必須使用 JavaScript 變通方法才能使其在討厭的 Internet Explorer 中工作......
解決方案11
16
這是我這樣做的方法（它可能不是最佳的，但它有效）：
創建您想要半透明的div 。 給它一個類/ id。 將其留空，然后將其關閉。 給它一個設定的高度和寬度（比如，300 像素 x 300 像素）。 給它一個 0.5 或任何你喜歡的不透明度和背景顏色。
然后，在該 div 的正下方，創建另一個具有不同類/id 的 div。 在其中創建一個段落，您將在其中放置文本。 給出div位置：相對，頂部： -295px （即負295 像素）。 給它一個 2 的 z-index 以獲得良好的度量，並確保它的不透明度為 1。根據需要為你的段落設置樣式，但確保尺寸小於第一個div的尺寸，這樣它就不會溢出。
而已。 這是代碼：
.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。
解決方案12
13 2014-08-07 02:39:32
如果您是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**
}
解決方案13
13 2010-10-25 13:55:41
這是一個 jQuery 插件，它將為您處理所有事情，Transify（ Transify - 一個 jQuery 插件，可以輕松地將透明度/不透明度應用於元素的背景）。
我時不時地遇到這個問題，所以我決定寫一些能讓生活更輕松的東西。 該腳本小於 2 KB，只需要一行代碼即可運行，如果您願意，它還可以處理背景不透明度的動畫。
解決方案14
12 2009-04-30 09:52:06
不久前，我在Cross Browser Background Transparency With CSS中寫到了這個。
奇怪的是 Internet Explorer 6 將允許您使背景透明並保持頂部的文本完全不透明。 對於其他瀏覽器，我建議使用透明的 PNG 文件。
解決方案15
10 2009-04-30 09:13:16
背景不透明，但不是文字有一些想法。 要么使用半透明圖像，要么覆蓋附加元素。
解決方案16
9 2013-05-20 23:36:50
CSS 3 可以輕松解決您的問題。 利用：
background-color:rgba(0, 255, 0, 0.5);
這里， rgba代表紅色、綠色、藍色和 alpha 值。 綠色值是因為 255 而獲得的，而半透明度是通過 0.5 alpha 值獲得的。
解決方案17
9 2016-06-03 12:09:42
為了使元素的背景半透明，但元素的內容（文本和圖像）不透明，您需要為該圖像編寫 CSS 代碼，並且必須添加一個名為opacity的最小值屬性。
例如，
.image {
position: relative;
background-color: cyan;
opacity: 0.7;
}
// 值越小越透明，或者值越小越透明。
解決方案18
8 2013-01-08 20:00:39
背景顏色：rgba(255, 0, 0, 0.5); 如上所述，簡單地說就是最好的答案。 說使用 CSS 3，即使在 2013 年，也並不簡單，因為各種瀏覽器的支持水平隨着每次迭代而變化。
雖然所有主要瀏覽器都支持background-color （不是 CSS 3 的新功能）[1]，但 alpha 透明度可能會很棘手，尤其是對於 9 版之前的 Internet Explorer 和 5.1 版之前的 Safari 上的邊框顏色。 [2]
使用Compass或SASS 之類的東西可以真正幫助生產和跨平台兼容性。
解決方案19
8 2015-06-03 07:28:45
如果您使用的是Less ，則可以使用fade(color, 30%) 。
解決方案20
5 2013-12-06 14:40:49
您可以通過（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')";
解決方案21
4
您可以使用純CSS 3 ： rgba(red, green, blue, alpha) ，其中alpha是您想要的透明度級別。 不需要 JavaScript 或 jQuery。
下面是一個例子：
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}
解決方案22
3 2014-11-18 10:47:44
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
<img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>
解決方案23
2 2018-05-22 06:10:43
您可以使用 CSS 使用rgba color code來完成，如下所示。
.imgbox img{ height: 100px; width: 200px; position: relative; } .overlay{ background: rgba(74, 19, 61, 0.4); color: #FFF; text-shadow: 0px 2px 5px #000079; height: 100px; width: 300px; position: absolute; top: 10%; left: 25%; padding: 25px; }
<div class"imgbox"> <img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg"> <div class="overlay"> <p>This is Simple Text.</p> </div> </div>
解決方案24
2 2018-12-12 07:29:47
根據我的觀點，使用不透明背景顏色的最佳方法如下。 如果我們使用它，那么我們不會失去其他元素的不透明度，例如測試顏色、邊框等。
background-color: rgba(71, 158, 0, 0.8);
使用不透明的背景顏色
background-color: rgba(R, G, B, Opacity);
解決方案25
1 2014-12-29 16:25:56
有一個更簡單的解決方案可以在同一個 div 上的圖像上疊加。 這不是正確使用此工具。 但是使用 CSS 進行疊加就像一個魅力。
使用這樣的嵌入陰影：
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
就這樣 ：）
解決方案26
1 2017-10-20 02:41:59
您可以在CSS 中使用RGBA (red, green, blue, alpha) 。 像這樣的東西：
所以簡單地做這樣的事情就可以在你的情況下工作：
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}
解決方案27
1 2020-04-21 13:44:21
您可以使用附加到十六進制值的不透明度值：
background-color: #11ffeeaa;
在此示例中， aa是不透明度。 opacity 為00表示透明， ff表示純色。
不透明度是可選的，因此您可以像往常一樣使用十六進制值：
background-color: #11ffee;
您還可以將舊方法與rgba()一起使用：
background-color: rgba(117, 190, 218, 0.5);
如果您想確保背景沒有其他樣式，例如圖像或漸變，則使用background速記：
background: #11ffeeaa;
來自 Mozilla 的規范（ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color ）：
/* Keyword values */
background-color: red;
background-color: indigo;
/* Hexadecimal value */
background-color: #bbff00; /* Fully opaque */
background-color: #bf0; /* Fully opaque shorthand */
background-color: #11ffee00; /* Fully transparent */
background-color: #1fe0; /* Fully transparent shorthand */
background-color: #11ffeeff; /* Fully opaque */
background-color: #1fef; /* Fully opaque shorthand */
/* RGB value */
background-color: rgb(255, 255, 128); /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5); /* 50% transparent */
/* HSL value */
background-color: hsl(50, 33%, 25%); /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75); /* 75% transparent */
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;
/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
解決方案28
0 2017-02-11 08:00:03
我通常在我的工作中使用這個類。 這個很不錯。
.transparent { filter: alpha(opacity=50); /* Internet Explorer */ -khtml-opacity: 0.5; /* KHTML and old Safari */ -moz-opacity: 0.5; /* Firefox and Netscape */ opacity: 0.5; /* Firefox, Safari, and Opera */ }
解決方案29
0 2020-03-12 08:01:18
使用#AARRGGBB格式時它對我有用，所以對我有用的是#1C00ff00 。 試一試，因為我已經看到它對某些人有效，而對其他人無效。 我在 CSS 中使用它。
解決方案30
0 2021-07-03 10:55:46
由於很多人來到這里想知道如何調整任何元素（不僅僅是背景）的不透明度，它就像在該元素的 CSS 中添加opacity: 0.2 （或您想要的 0 和 1 之間的任何數字）一樣簡單。
例子
.myclass {
color: #eb4746;
opacity: 0.2;
}
這可以用於背景和標題、段落等。
解決方案31
0 2021-10-27 21:03:47
我同意上述所有答案，並且 rgba 是要走的路。 就我而言，我以編程方式獲得了十六進制背景，因此我必須根據十六進制代碼生成自己的 rgba。 我創建了唐先生答案的修改版本，將十六進制轉換為 rgba
function hexToRgba(hex,alpha) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if(result!=null){
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
//
return `rgba(${r},${g},${b},${alpha})`;
}
return null;
}
解決方案32
0 2021-11-29 07:16:44
我認為這會給你想要的輸出：
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
解決方案33
-1 2020-08-22 17:41:55
這給出了預期的結果 -
body {
background-image: url("\images\dark-cloud.jpg");
background-size: 100% 100%;
background-attachment: fixed;
opacity: .8;
}
設置背景的不透明度。
解決方案34
-2 2016-12-29 09:40:00
您可以使用不透明的RGB顏色，例如RGB中的顏色代碼（63，245，0），並添加不透明性（例如63、245、0、0.5），也可以用RGBA替換RGB。 A用於不透明度。
div { background: rgba(63, 245, 0, 0.5); }
如果我有以下代碼，如何使背景圖像在CSS中透明？
[英]How do i make my background image transparent in CSS if I have the following code?
如何使用HTML和CSS設置唯一的背景圖像透明？
[英]How I can set the only the Background image transparent with HTML and CSS?
在CSS中使用不透明度時，如何使背景透明而不是文本？
[英]When Using Opacity With CSS How Can I Make The Background Transparent But Not The Text?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.