css按钮文本和按钮背景不同的不透明度 [英] css button text and button background different opacity
问题描述
我试图在这里解决这个问题 - http：/ /jsfiddle.net/9jXYt/
CSS：
#xxx {
outline：white solid 0.5px;
/ *不透明度：0.2; * /
background-color：rgba（255,0,0,0.2）;
padding：6px 8px;
border-radius：3px;
颜色：黑色;
font-weight：bold;
border：none;
保证金：0;
/ * box-shadow：0px 2px 3px＃444; * /
}
#xxx：hover {
opacity：0.9;
}
#fff {
font-family：helvetica，arial，sans-serif;
font-size：19pt;
不透明度：1！重要;
color：rgba（0,0,0,0.5）！important;
}
HTML：
<按钮ID =xxx>< div id =fff>这是一项测试< / div>< / button>
预先感谢任何提示。
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;
保证金：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>这是一项测试< /按钮>
< / body>
< / html>
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?
My attempt at a fiddle to solve this here - http://jsfiddle.net/9jXYt/
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>
Thanks in advance for any hints.
opacity is inherited by children and can't be reversed, so use rgba on the parent as well. E.g.
<!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>
这篇关于css按钮文本和按钮背景不同的不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
