css按钮文字和按钮背景不透明度不同答案

【问题标题】：css button text and button background different opacitycss按钮文字和按钮背景不透明度不同
【发布时间】：2014-02-26 00:16:17
【问题描述】：

希望您能帮助解答一个关于 CSS 的简单问题。我正在尝试制作一个具有透明背景的按钮（不需要是 html 类按钮）和一个带有与按钮不透明度相同的文本的轮廓。也就是说，文本应保持与按钮不同的不透明度。这可能吗？

我在这里尝试解决这个问题 - 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">This is a test</div></button>

提前感谢您的任何提示。

【问题讨论】：

标签： html css

【解决方案1】：

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>

【讨论】：

效果很好 - 感谢您的澄清。一个小的后续行动 - 我试图编辑你的小提琴（这总是让我感到不安）以获得支持 rgba(x,y,z,a) 的边框或轮廓 - 但这似乎不起作用 - 有吗解决方法？
你的意思是这样的吗？ border: 5px solid rgba(3,66,22,0.5);

【解决方案2】：

我认为您尝试做的事情的秘诀是使用透明颜色而不是不透明度。

#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);
}

我已经改编了你的小提琴：http://jsfiddle.net/harveyramer/8pymY/

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

正如 ralph.m 所说， opacity is inherited by children and can't be reversed, so use rgba on the parent as well. 如果您需要示例，这里有一个编辑过的 jsfiddle。

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

祝你好运！

【讨论】：