且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

css按钮文本和按钮背景不同的不透明度

更新时间: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>

相关阅读

技术问答最新文章