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

Question

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

13

希望您能帮忙回答一个关于CSS的简单问题。我想要制作一个具有透明背景和轮廓线的按钮（不需要是html类按钮），并且其中的文本不与按钮具有相同的不透明度。也就是说，文本应该保持与按钮不同的不透明度。这种情况是否可能？以下是我的尝试，使用fiddle解决此问题-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">这是一个测试</div></button>

感谢您提供的任何提示。

- mistertee

4个回答

4

我认为你想要做的事情的秘诀是使用透明颜色而不是不透明度。

#xxx {
  outline:white solid 0.5px;
  padding: 6px 8px;
  border-radius: 3px;
  background-color: rgba(0,0,0, .25);
  color: black;
  font-weight: bold;
  border: none;
  margin: 0;
}

#xxx:hover {
   background-color: rgba(0,0,0,.30);
}

#fff {
    font-family: helvetica, arial, sans-serif;
    font-size: 19pt;
    color: rgba(0,0,0,.25);
}
#fff:hover {   
   color: rgba(0,0,0,.6);
}

我已经修改了你的 fiddle： http://jsfiddle.net/harveyramer/8pymY/

- Harvey A. Ramer

1

#xxx:hover {
  background-color: rgba(255,0,0,0.9);  
}

通过设置不透明度，您会影响其中的所有内容。

- Casey Dwayne

0

如ralph.m所说， 透明度会被子元素继承并且无法反转，因此在父元素上也要使用rgba。如果您需要一个示例，这里有一个编辑过的jsfiddle。

http://jsfiddle.net/9jXYt/3/

祝你好运！

- badcc

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ralph.m · Accepted Answer

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>