Html 如何在不使内容透明的情况下使帖子背景半透明？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17938521/
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 post background semi-transparent without making the content transparent?
提问by user2632633
I've looked at tons of posts pertaining to my problem and nobody really has the same html so I can't really figure it out.
我已经查看了大量与我的问题有关的帖子，但没有人真正拥有相同的 html，所以我无法真正弄清楚。
I'm trying to make my tumblr blog's post background semi-transparent without making the photos, videos, text, etc. on the post transparent. Right now I have
我试图让我的 tumblr 博客的帖子背景半透明，而不是让帖子上的照片、视频、文本等透明。现在我有
#left-column .post {
opacity: 0.5;
filter: alpha(opacity=50);
z-index: -1;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
float: left;
padding-top: 20px;
width: 520px;
}
I'm sure I need to supply more code for this question. If you have any requests I'll copy/paste over to here. Also, I only know the basics to html/css so if I don't understand something right away, I'll have a question or two. Thanks.
我确定我需要为这个问题提供更多代码。如果您有任何要求，我会复制/粘贴到这里。另外，我只知道 html/css 的基础知识，所以如果我不马上理解某些东西，我会有一两个问题。谢谢。
回答by doitlikejustin
Use RGBa (Red Green Blue Alpha)
使用 RGBa（红绿蓝阿尔法）
background-color: rgba(255,255,255,0.5);
So your code would be
所以你的代码将是
#left-column .post {
z-index: -1;
background-color: rgba(255,255,255,0.5);
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
float: left;
padding-top: 20px;
width: 520px;
}
回答by Mihai Viteazu
you can use this website http://hex2rgba.devoth.com/to make your background how you need it how transparent to be and what color
你可以使用这个网站http://hex2rgba.devoth.com/来让你的背景如何你需要它如何透明以及什么颜色
try this code:
试试这个代码：
#left-column .post {
background: rgba(255, 255, 255, 0.5);
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
float: left;
padding-top: 20px;
width: 520px;
}
rgba(255, 255, 255, 0.5) = #FFF
rgba(255, 255, 255, 0.5) = #FFF
