希望你可以帮助解决一个关于CSS的简单问题.我正在尝试使用透明背景和带有与按钮不具有相同不透明度的文本的轮廓来创建一个按钮(不需要是html类按钮).也就是说,文本应保持与按钮不同的不透明度.这可能吗？
我试图在这里解决这个问题 – http://jsfiddle.net/9jXYt/
CSS：
#xxx {
outline:white solid 0.5px;
/*opacity: 0.2; */
background-color: rgba(255,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.5) !important;
}
HTML：
< button 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.4); font-weight: bold; border: none; margin: 0; background: rgba(0,0.2); font-family: helvetica,sans-serif; font-size: 19pt; } #xxx:hover { background: rgba(0,0.4); color:rgba(0,0.8); } </style> </head> <body> <button id="xxx">This is a test</button> </body> </html>
