CSS 不透明背景颜色和文本不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18376310/
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
CSS opacity background color and text not working
提问by
im making an app for firefox OS and i want to make button background opacity 0.5 and the text opacity 1... but it didnt work... check the css:
我正在为 firefox OS 制作一个应用程序，我想让按钮背景不透明度为 0.5，文本不透明度为 1 ......但它没有用......检查css：
.button{
height:40px;
width:180px;
border-radius: 100px 100px 100px 100px;
border: 1px solid #FF9924;
display:inline-block;
background-color:#FF9924;
padding-top:5px;
opacity:0.5;
}
h1{
padding: 5px 5px 5px 5px;
text-align:center;
font-size:20px;
font-family: firstone;
opacity:1.0;
}
on page:
在页面上：
<div class="menu">
<div class="button"><h1>Start the fight</h1></div>
</div>
采纳答案by Itay
You should read about rgba
你应该阅读关于rgba
This is the syntax:
这是语法：
.button {
background-color: rgba(255, 153, 36, 0.5)
}
Here's a Hex-to-RGB Color Converter
这是一个十六进制到 RGB 的颜色转换器
回答by softvar
回答by Keugels
That seems impossible indeed. You can try making a .buttonwrapper instead of .button. Inside .buttonwrapper you place two absolute positioned layers, one with the actual button with an opacity of 0.5, and one above it with the text at opacity of 1, without background.
这似乎确实是不可能的。您可以尝试制作 .buttonwrapper 而不是 .button。在 .buttonwrapper 中，您放置两个绝对定位图层，一个是实际按钮的不透明度为 0.5，另一个是其上方的文本不透明度为 1，没有背景。
<div class="buttonwrapper">
<div class="button"></div>
<div class="button_text"><h1>Text</h1></div>
</div>
回答by gmo
You can't give opacityonly to the background without affecting the rest...
Instead, try with alphain background-color.
你不能opacity只给背景而不影响其他......
相反，尝试使用alphain background-color。
Ex.
前任。
.button{
background-color: #FF9924; // for browser that don't accept alpha in color
background-color: rgba(255, 153, 36, 0.5);
}
