Прозрачный цвет фона, но только прозрачность

Question

Мне нужно добавить прозрачность в цвет фона, который изменит пользователя. Как если бы пользователь установил цвет фона на # f00, мне нужно добавить 0.5 прозрачности к этому. Я не могу использовать rgba(), потому что я получаю цвет в формате #RGB. Я не могу добавить прозрачность ко всему контенту.

Answer 1

С вашей помощью я нашел самое лучшее решение для меня list($r,$g,$b) = array_map('hexdec',str_split($colorName,2)); echo 'rgba('.$r.','.$g.','.$b.',0.5)'; Благодаря всем

Answer 2

Если вы не можете использовать rgba, непрозрачность css должна быть опцией, но будет исчезать весь контент внутри. Я думаю, что решение может быть крошечным png, а не за его пределами.

Возможно: попробуйте использовать непрозрачность css и создайте другой div внутри и используйте z-index для управления непрозрачностью содержимого.

Answer 3

Вы можете использовать хак, если ваш контент всегда одинаковой высоты.

Используйте три divs. Один div держит два других. Один div - фон.

Один div является передним/непрозрачным контентом.

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

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

Тогда в css. сделайте положение bg и content relative таким, чтобы внутренние divs отображались один поверх другого. Кроме того, возможно, придется использовать 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 4

Javascript может сделать трюк. Я предполагаю, что вы используете jQuery, так как вы упомянули об этом.

View the fiddle here

Если вы можете использовать JQuery, чтобы получить цвет, он возвращает строку в формате "RGB (х, х, х). Затем вы можете использовать функцию для преобразования ее в строку 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);