Html 如何制作没有背景图像的透明背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3222961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a transparent background without background image?
提问by Misha Moroshko
I would like a divto have a transparent background.
I tried to do this using background-colorand opacity, but the problem is that the border and the text inside become also transparent. Example here.
我想要div一个透明的背景。
我尝试使用background-colorand来做到这一点opacity，但问题是边框和里面的文本也变得透明。例子在这里。
Is this possible to achieve this without using transparent PNG background image ?
这是否可以在不使用透明 PNG 背景图像的情况下实现？
回答by DHuntrods
If you just want the color of the background to be transparent and not the child content, use
如果您只希望背景颜色透明而不是子内容，请使用
background-color: rgba(0,0,0,.5); // Sets to 50% transparent
background-color: rgba(0,0,0,.5); // Sets to 50% transparent
See this page for more details - it's a css3 spec so won't show up in every browser:
有关更多详细信息，请参阅此页面 - 它是 css3 规范，因此不会出现在每个浏览器中：
回答by Gabriele Petrioli
Yes.
是的。
Set
background-color: transparent;
放
background-color: transparent;
and do not use opacity, as that is what makes semi-transparent the whole div..
并且不要使用opacity，因为那是使整个 div 半透明的原因。
updated your example at http://jsfiddle.net/eU7By/1/
在http://jsfiddle.net/eU7By/1/更新了您的示例
UPDATEafter comments
评论后更新
you can use rgba for the background-color as @DHuntrods mentions. IE needs some tweaking of'course.. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/
您可以使用 rgba 作为背景颜色，如@DHuntrods 所述。IE 需要一些调整 of'course.. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/
回答by Adrien Be
The most cross-browser solutionis to use the opacity property on an additional "absolutely positioned" child element (in a relatively or absolutely positioned parent): it only there to contain the colored transparent background.
最跨浏览器的解决方案是在附加的“绝对定位”子元素（在相对或绝对定位的父元素中）使用 opacity 属性：它只在那里包含彩色透明背景。
Then you can use the opacityproperty to make this element transparent. Since this element has no children, the opacity will not affect any other element.
然后您可以使用该opacity属性使该元素透明。由于此元素没有子元素，因此不透明度不会影响任何其他元素。
Opacity is an IE5+ property, just use (see http://css-tricks.com/snippets/css/cross-browser-opacity/):
不透明度是 IE5+ 的属性，只需使用（参见http://css-tricks.com/snippets/css/cross-browser-opacity/）：
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
see the jsFiddle example http://jsfiddle.net/DUjzX/1/
参见 jsFiddle 示例http://jsfiddle.net/DUjzX/1/
The whole code looks like:
整个代码看起来像：
The HTML:
HTML：
<div class="my-cool-wrapper">
<div class="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>
<div class="transparent-background">
</div>
</div>
The CSS:
CSS：
.my-cool-wrapper {
position: relative;
}
.my-cool-wrapper .text-and-images-on-top {
padding: 10px 15px 19px 15px;
z-index: 1;
position: relative; /* needed to enable the z-index */
}
.my-cool-wrapper .transparent-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; /* IE 8 */
filter: alpha(opacity=10); /* IE 5-7 */
-moz-opacity: 0.1; /* Netscape */
-khtml-opacity: 0.1; /* Safari 1.x */
opacity: 0.1; /* Good browsers */
background-color: blue;
}
read more: Set opacity of background image without affecting child elements
阅读更多： 在不影响子元素的情况下设置背景图像的不透明度
Screenshots proofs
截图样张
ps: I did not add the screenshots for Chrome, Firefox & Safari since these are much "better" browsers... trust me, it works for them too.
ps：我没有为 Chrome、Firefox 和 Safari 添加屏幕截图，因为这些是“更好”的浏览器......相信我，它也适用于它们。
回答by Amalgovinus
I had to use a 30x30 transparent gif as a background.
我不得不使用 30x30 的透明 gif 作为背景。
background:url('absolute path here');
