在CSS中設置背景不透明度

-1

我想在CSS中使元素的背景半透明。據我所知，有一種方法可以做到這一點使用在CSS中設置背景不透明度

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

，但我想動態地創建在我的Rails應用程序的CSS，我現在用的變量是一個十六進制代碼。有沒有相當於rgba（），這將允許我使用我的十六進制代碼作爲參數？

來源

2012-07-13 Huub Mons

background-color：＃十六進制代碼不起作用？ – 2012-07-13 21:59:24

@RamanZhylich：但不允許設置不透明度。 – gopi1410 2012-07-13 22:00:07

爲什麼不使用[Color]（http://rubyforge.org/projects/color/）並進行轉換。 – steveax 2012-07-13 22:03:44

您可以將您的十六進制代碼在這裏RGB：http://www.javascripter.net/faq/hextorgb.htm

編輯：

然後，他能做到這一點的紅寶石。

創建一個函數，它的十六進制字符串，在三個部分分割字符串並轉換這樣每一部分：

hex_part = "ff"  
hex_part.to_i 16

編輯2：

hex = "ff8800" 
hex_parts = hex.scan(/.{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_parts.join(",") // Join the parts with a "," and you will get "255,136,0".

來源

2012-07-13 22:00:11

但他的十六進制代碼是在一個變量。他不喜歡將它手動轉換爲rgba – gopi1410 2012-07-13 22:02:33

好吧，看我的編輯:) – 2012-07-13 22:47:01

如果您附上元素

一個div標籤，比方說class =「opac」，你可以這樣使用jQuery：

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

這個會讓你的「OPAC」對象的不透明度爲20％時觸發特殊事件，例如，如果標記Add_Something一個div內的鏈接被點擊：

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

「500」僅僅是速度，其中，對象將變成半透明...

來源

2012-07-13 22:05:46 citraL

是的，但'opacity'會影響容器中的所有內容，而不僅僅是背景屬性。 – steveax 2012-07-13 22:48:15

在CSS中設置背景不透明度

回答

相關問題