希望你可以帮助解决一个关于CSS的简单问题.我正在尝试使用透明背景和带有与按钮不具有相同不透明度的文本的轮廓来制作一个按钮(不需要是html类按钮).也就是说,文本应保持与按钮不同的不透明度.这可能吗？
我试图在这里解决这个问题 - 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>
提前感谢任何提示.
ral*_*h.m 11
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>