CSS 如何制作半透明背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4790563/
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 do I make a semi transparent background?
提问by lisovaccaro
I need to make a white background 50% transparent without affecting anything else. How do I do it?
我需要在不影响其他任何东西的情况下使白色背景透明 50%。我该怎么做？
回答by Tarun
Use rgba():
使用rgba()：
.transparent {
background-color: rgba(255,255,255,0.5);
}
This will give you 50% opacity while the content of the box will continue to have 100% opacity.
这将为您提供 50% 的不透明度，而框的内容将继续具有 100% 的不透明度。
If you use opacity:0.5, the content will be faded as well as the background. Hence do not use it.
如果使用opacity:0.5，内容和背景都会褪色。因此不要使用它。
回答by umesh pathak
This works, but all the children of the element with this class will also become transparent, without any way of preventing that.
这是可行的，但是具有此类的元素的所有子项也将变得透明，而没有任何方法可以阻止这种情况。
.css-class-name {
opacity:0.8;
}
回答by ThomasDuc
If you want to make transparent background is gray, pls try:
如果你想让透明背景变成灰色，请尝试：
.transparent{
background:rgba(1,1,1,0.5);
}
回答by Windows Warrior
DO NOT use a 1x1 semi transparent PNG. Size the PNG up to 10x10, 100x100, etc. Whatever makes sense on your page. (I used a 200x200 PNG and it was only 0.25 kb, so there's no real concern over file size here.)
请勿使用 1x1 半透明 PNG。将 PNG 的大小调整为 10x10、100x100 等。无论您的页面是否有意义。（我使用了 200x200 PNG，它只有 0.25 kb，所以这里没有真正关心文件大小。）
After visiting this post, I created my web page with 3, 1x1 PNGs with varying transparency.
访问这篇文章后，我创建了我的网页，其中包含 3 个 1x1 具有不同透明度的 PNG。
Dreamweaver CS5 was tanking. I was having flash backs to DOS!!! Apparently any time I tried to scroll, insert text, basically do anything, DW was trying to reload the semi transparent areas 1x1 pixel at a time ... YIKES!
Dreamweaver CS5 正在崩溃。我正在闪回DOS！！！显然，每当我尝试滚动、插入文本、基本上做任何事情时，DW 都试图一次重新加载 1x1 像素的半透明区域......哎呀！
Adobe tech support didn't even know what the problem was, but told me to rebuild the file (it worked on their systems, incidentally). It was only when I loaded the first transparent PNG into the css file that the doc dove deep again.
Adobe 技术支持甚至不知道问题出在哪里，但告诉我重建文件（顺便说一下，它在他们的系统上有效）。只有当我将第一个透明 PNG 加载到 css 文件中时，文档才再次深入。
Then I found a post on another help site about PNGs crashing Dreamweaver. Size your PNG up; there's no downside to doing so.
然后我在另一个帮助站点上找到了一篇关于 PNG 使 Dreamweaver 崩溃的帖子。将您的 PNG 放大；这样做没有坏处。
回答by Joacim Nitz
Good to know
很高兴知道
Some web browsers have difficulty to render text with shadows on top of transparent background. Then you can use a semi transparent 1x1 PNG image as a background.
某些 Web 浏览器难以在透明背景上呈现带有阴影的文本。然后您可以使用半透明的 1x1 PNG 图像作为背景。
Note
笔记
Remember that IE6 don't support PNG files.
请记住，IE6 不支持 PNG 文件。
回答by Bruce
Although dated, not one answer on this thread can be used universally. Using rgba to create transparent color masks - that doesn't exactly explain how to do so with background images.
尽管已过时，但该线程上没有一个答案可以普遍使用。使用 rgba 创建透明的颜色蒙版 - 这并不能完全解释如何处理背景图像。
My solution works for background images or color backgrounds.
我的解决方案适用于背景图像或彩色背景。
#parent {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 19px;
text-transform: uppercase;
border-radius: 50%;
margin: 20px auto;
width: 125px;
height: 125px;
background-color: #476172;
background-image: url('https://unsplash.it/200/300/?random');
line-height: 29px;
text-align:center;
}
#content {
color: white;
height: 125px !important;
width: 125px !important;
display: table-cell;
border-radius: 50%;
vertical-align: middle;
background: rgba(0,0,0, .3);
}<h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>回答by Abhi Sharma
div.main{
width:100%;
height:550px;
background: url('https://images.unsplash.com/photo-1503135935062-
b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
background-position:center;
background-size:cover
}
div.main>div{
width:100px;
height:320px;
background:transparent;
background-attachment:fixed;
border-top:25px solid orange;
border-left:120px solid orange;
border-bottom:25px solid orange;
border-right:10px solid orange;
margin-left:150px
}
回答by Chandu
Try this:
尝试这个：
.transparent
{
opacity:.50;
-moz-opacity:.50;
filter:alpha(opacity=50);
}
