更新时间:2022-12-23 19:17:03
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>