Html css按钮文本和按钮背景不同的不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21511641/
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 button text and button background different opacity
提问by mistertee
hopefully you can help with a simple question about CSS. I'm trying to make a button (doesn't need to be html class button) with a transparent background and an outline with text that does not have the same opacity as the button. That is, the text should remain at a different opacity than the button. Is this possible?
希望你能帮助解决一个关于 CSS 的简单问题。我正在尝试制作一个具有透明背景的按钮（不需要是 html 类按钮）和一个带有与按钮不具有相同不透明度的文本的轮廓。也就是说，文本应保持与按钮不同的不透明度。这可能吗？
My attempt at a fiddle to solve this here - http://jsfiddle.net/9jXYt/
我试图在这里解决这个问题 - http://jsfiddle.net/9jXYt/
CSS:
CSS：
#xxx {
outline:white solid 0.5px;
/*opacity: 0.2; */
background-color: rgba(255,0,0,0.2);
padding: 6px 8px;
border-radius: 3px;
color: black;
font-weight: bold;
border: none;
margin: 0;
/*box-shadow: 0px 2px 3px #444;*/
}
#xxx:hover {
opacity: 0.9;
}
#fff {
font-family: helvetica, arial, sans-serif;
font-size: 19pt;
opacity: 1 !important;
color: rgba(0,0,0,0.5) !important;
}
HTML:
<button id="xxx"><div id="fff">This is a test</div></button>
HTML：
<button id="xxx"><div id="fff">This is a test</div></button>
Thanks in advance for any hints.
提前感谢您的任何提示。
回答by ralph.m
opacityis inherited by children and can't be reversed, so use rgbaon the parent as well. E.g.
opacity由子项继承且无法逆转，因此也可用于rgba父项。例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#xxx {
outline:white solid 0.5px;
padding: 6px 8px;
border-radius: 3px;
color:rgba(0,0,0,0.4);
font-weight: bold;
border: none;
margin: 0;
background: rgba(0,0,0,0.2);
font-family: helvetica, arial, sans-serif;
font-size: 19pt;
}
#xxx:hover {
background: rgba(0,0,0,0.4);
color:rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<button id="xxx">This is a test</button>
</body>
</html>
回答by Harvey A. Ramer
I think the secret to what you're trying to do is to use transparent colors rather than opacity.
我认为你想要做的事情的秘诀是使用透明的颜色而不是不透明度。
#xxx {
outline:white solid 0.5px;
padding: 6px 8px;
border-radius: 3px;
background-color: rgba(0,0,0, .25);
color: black;
font-weight: bold;
border: none;
margin: 0;
}
#xxx:hover {
background-color: rgba(0,0,0,.30);
}
#fff {
font-family: helvetica, arial, sans-serif;
font-size: 19pt;
color: rgba(0,0,0,.25);
}
#fff:hover {
color: rgba(0,0,0,.6);
}
I've adapted your fiddle: http://jsfiddle.net/harveyramer/8pymY/
我已经改编了你的小提琴：http: //jsfiddle.net/harveyramer/8pymY/
回答by badcc
As ralph.msaid,
opacity is inherited by children and can't be reversed, so use rgba on the parent as well.In case you need an example, here is an editedjsfiddle.
正如ralph.m所说，
opacity is inherited by children and can't be reversed, so use rgba on the parent as well.如果你需要一个例子，这里是一个编辑过的jsfiddle。
Good luck!
祝你好运！
回答by Casey Dwayne
#xxx:hover {
background-color: rgba(255,0,0,0.9);
}
By setting your opacity you are affecting everything in it.
通过设置不透明度，您会影响其中的所有内容。
