透明背景颜色，但只有透明度答案

【问题标题】：Transparent Background Color, but only transparency透明背景颜色，但只有透明度
【发布时间】：2014-03-22 01:15:25
【问题描述】：

我需要为背景颜色添加透明度，这将改变用户。就像用户将背景颜色设置为 #f00 一样，我需要为其添加 0.5 透明度。我不能使用 rgba() 因为我得到#RGB 格式的颜色。我无法为所有内容添加透明度。

【问题讨论】：

css 不透明度？ stackoverflow.com/questions/4386714/css3-cross-browser-opacity
请大家帮我看看，很多开发者都需要你的回答
正如其他人所说，如果您不希望内容也透明，您唯一的选择是 rgba。
css 3 或 jQuery 中没有 background-image-transparent: 选项吗？
不。您有透明的 .png 图像、rgba 或使整个元素透明且不透明。为什么不能让用户使用 rgba，或者寻找一种将十六进制输入转换为 rgba 的方法？

标签： css background opacity transparent

【解决方案1】：

如果您的内容始终保持相同的高度，您可以使用 hack。

使用三个 div。一个 div 包含另外两个。一个 div 是背景。

一个 div 是前景/不透明的内容。

<div id='holder'>
<div id='bg'>

</div>
<div id='content'>
Content is here
</div>
</div>

然后在 css 中。使 bg 和 content 的位置相对，以便内部 div 一个在另一个之上。您可能还必须使用 zIndex 或（类似这样）：

#bg {
opactiy: .5;
background-color:#333;
position: relative;
top: 0px;
left: 0px;
height: 300px;
    }

#content {
position: relative;
top: -300px; // negative of the height
left: 0px;
}

诚然，这很容易变得一团糟！希望对您有所帮助。

【讨论】：

如果不知道元素的高度怎么办？
我已经创建了类似的东西，但是#bg 确实是绝对的，因为父元素的高度取自#content，最后认为错误是 z-index。现在 asolute，z-index:10 高于相对的 z-index:12
如果内容总是在同一个绝对位置（比如页面的左上角），那么你可以对它们都使用 position: absolute - 那么 top 和 left 是相同的对彼此而言。（我认为您正在尝试这个？）不幸的是，如果内容可能从任何地方开始并且是任何高度，我不知道有什么方法可以让它们看起来一个在另一个之上。

【解决方案2】：

Javascript 可以解决问题。既然你提到了，我假设你正在使用 jQuery。

View the fiddle here

如果您可以使用 jQuery 获取颜色，它将返回一个格式为 'rgb(x,x,x)' 的字符串。然后，您可以使用函数将其转换为 rgba 字符串。

function rgbToRgba(rgbString, alpha) {
    rgba = rgbString.replace( 'rgb', 'rgba' );
    rgba = rgba.replace( ')', ',' + alpha + ')' );
    return rgba;
}

然后您可以使用新值设置 css。

var color = $('.makeMeRgba').css('background-color');
var rgba = rgbToRgba(color, 0.5);

$('.makeMeRgba').css('background-color', rgba);

【讨论】：

【解决方案3】：

在您的帮助下，我找到了最适合我的解决方案 list($r,$g,$b) = array_map('hexdec',str_split($colorName,2)); echo 'rgba('.$r.','.$g.','.$b.',0.5)'; 谢谢大家

【讨论】：

【解决方案4】：

如果你不能使用 rgba，css opacity 应该是一个选项，但会淡化里面的所有内容。我想解决方案可以是一个很小的 png，而不是超出此范围。

也许：尝试使用 css opacity 并在里面创建另一个 div，并使用 z-index 来控制内容的不透明度。

【讨论】：

不，里面的所有内容都采用不透明度值