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屋!