html的按钮背景透明代码,html – css按钮文本和按钮背景不同的不透明度

希望你可以帮助解决一个关于CSS的简单问题.我正在尝试使用透明背景和带有与按钮不具有相同不透明度的文本的轮廓来创建一个按钮(不需要是html类按钮).也就是说,文本应保持与按钮不同的不透明度.这可能吗？

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”>这是一个测试< / div>< / button>

提前感谢任何提示.