установить прозрачность фона в css

Я хочу сделать фон элемента полупрозрачным в css. Я знаю, что есть способ сделать это, используя

background-color: rgba(100,100,100,0.5);

но я пытаюсь динамически создать css в своем приложении rails, и переменная, которую я использую, представляет собой шестнадцатеричный код. Есть ли эквивалент rgba(), который позволит мне использовать мой шестнадцатеричный код в качестве параметра?


ruby-on-rails css opacity hex erb
person Huub Mons    schedule 13.07.2012    source источник
comment
background-color: #hex-код не работает?   -  person Raman Zhylich    schedule 14.07.2012
comment
@RamanZhylich: но это не позволит установить непрозрачность.   -  person gopi1410    schedule 14.07.2012
comment
Почему бы просто не использовать Color и не выполнить преобразование.   -  person steveax    schedule 14.07.2012
comment
Также здесь: RGB в Hex и Hex в RGB   -  person Stano    schedule 14.07.2012

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете преобразовать свой шестнадцатеричный код в rgb здесь: http://www.javascripter.net/faq/hextorgb.htm

Редактировать:

Тогда он может сделать это в рубине.

Создайте функцию, которая принимает шестнадцатеричную строку, разделяет строку на три части и преобразует каждую часть следующим образом:

hex_part = "ff"    
hex_part.to_i 16

Редактировать 2:

hex = "ff88­00"
hex_parts = hex.s­can(/.{1,2­}/)
hex_parts[0] = hex_parts[0].to_i 16 // Will make first part to dec.
hex_parts[1] = hex_parts[1].to_i 16
hex_parts[2] = hex_parts[2].to_i 16
dec = hex_p­arts.join(­",")  // Join the parts with a "," and you will get "255,136,0".
person Niclas Larsson    schedule 13.07.2012
comment
но его шестнадцатеричный код находится в переменной. Он не предпочтет конвертировать его вручную в rgba - person gopi1410; 14.07.2012

arrow_upward
0
arrow_downward

если вы заключите свой элемент в тег div, скажем, class=opac, вы можете просто использовать jQuery таким образом:

$('.opac').animate({opacity: .2},500);

это сделает непрозрачность вашего объекта 'opac' до 20%, когда запускается определенное событие, например, если щелкнуть ссылку в div, помеченном Add_Something:

$('#Add_Something a').click(function() {
    $('.opac').animate({opacity: .2}, 500);
});

'500' - это как раз скорость, с которой объект станет полупрозрачным...

person citraL    schedule 13.07.2012
comment
Да, но opacity влияет на все в контейнере, а не только на свойство фона. - person steveax; 14.07.2012