CSS不透明度背景颜色和文本不起作用[重复]

Posted 2023-03-06

【中文标题】CSS不透明度背景颜色和文本不起作用[重复]

【英文标题】：CSS opacity background color and text not working [duplicate]

【发布时间】：2013-08-24 22:33:09

【问题描述】：

我正在为 FireFox 操作系统制作应用程序，我想将按钮背景不透明度设置为 0.5，文本不透明度设置为 1，但它不起作用。检查css：

.button
    height:40px;
    width:180px;
    border-radius: 100px 100px 100px 100px;
    border: 1px solid #FF9924;
    display:inline-block;
    background-color:#FF9924;
    padding-top:5px;
    opacity:0.5;



h1
    padding: 5px 5px 5px 5px;
    text-align:center;
    font-size:20px;
    font-family: firstone;
    opacity:1.0;

在页面上：

<div class="menu">
    <div class="button"><h1>Start the fight</h1></div>
</div>

【问题讨论】：

那是opacity and alpha的区别

【参考方案1】：

你应该阅读rgba

这是语法：

 .button 
      background-color: rgba(255, 153, 36, 0.5)
 

这是Hex-to-RGB Color Converter

【参考方案2】：

您应该使用rgba() 将background-color 设置为所需的opacity 它不会改变文本的不透明度。

在CSS3.INFO了解更多关于rgba的信息

.button 
   //...
   background-color: rgba(255, 153, 36, 0.5); 
   //...

看到这个DEMO

【参考方案3】：

这似乎确实是不可能的。您可以尝试制作 .buttonwrapper 而不是 .button。在 .buttonwrapper 中放置两个绝对定位的图层，一个是实际按钮，不透明度为 0.5，另一个是不透明度为 1 的文本，没有背景。

<div class="buttonwrapper">
    <div class="button"></div>
    <div class="button_text"><h1>Text</h1></div>
</div>

【参考方案4】：

您不能只将opacity 提供给后台而不影响其余部分... 相反，请尝试在 background-color 中使用 alpha。

例如

.button
  background-color: #FF9924; // for browser that don't accept alpha in color
  background-color: rgba(255, 153, 36, 0.5);