Question

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

Answer 1

如果您的内容总是相同的高度，您可以使用黑客。

使用三个div。一个div占据了另外两个。一个div是背景。

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

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

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

然后在css。使bg和内容的位置相对，以便内部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;
}

不可否认，这很容易变得混乱！希望它有所帮助。

Answer 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);

Answer 3

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

Answer 4

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

可能：尝试使用css opacity并在其中创建另一个div，并使用z-index来控制内容的不透明度。

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

4 个答案: