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

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

2014-02-20 user2982337

css opacity？ http://stackoverflow.com/questions/4386714/css3-cross-browser-opacity –

任何其他解决方案？ – user2982337

请大家，我认为它是可用的，许多开发人员将需要你的答案 – user2982337

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

来源

2014-02-20 21:37:53 user2982337

如果你不能使用rgba，css opacity应该是一个选项，但会淡入所有内容。我想解决方案可以是一个小小的PNG，不能超越这个。

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

来源

2014-02-20 20:37:00

不知道里面的所有内容取不透明度值 – user2982337

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

使用三个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; 
}

诚然，这很容易导致混乱！希望能帮助到你。

来源

2014-02-20 21:17:29

以及如果你不知道元素的高度怎么办？ – user2982337

我已经创建了类似这样的内容，但是#bg做的绝对是因为parrent元素的高度来自#content，而最后一个认为错误是z-index。现在asolute，z-index：10高于relative，z-index：12 – user2982337

如果内容总是处于相同的绝对位置（就像页面的左上角那样），那么你可以使用position：absolute他们 - 然后顶部和左边是相同的两个。（我认为你正在尝试这样做？）不幸的是，如果内容可能从任何地方开始，并且是任何高度，我不知道如何让它们看起来相互重叠。 –

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

来源

2014-02-20 22:01:51 nwalton

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

回答

相关问题