我知道你能寫...
background-color: #ff0000;...如果你想要紅色的東西。
你可以寫作...
background-color: rgba(255, 0, 0, 0.5);...如果你想要紅色半透明的東西。
有沒有什么簡潔的十六進制寫部分透明顏色的方法？我想要這樣的東西:
background-color: #ff000088; <--- the 88 is the alpha...或者...
background-color: #ff0000 50%;我所有的顏色都是十六進制的，必須把它們都轉換成十進制的0-255范圍，這很煩人。
三周前(2014年12月18日), CSS顏色模塊4級編輯草案被提交給CSS W3C工作組。盡管處于易受變化影響的狀態，文檔的當前版本意味著在不遠的將來CSS將同時支持4位和8位十六進制RGBA符號。
注意:下面的引用刪除了不相關的部分，當你讀到這里的時候，源代碼可能已經被大量修改了(如上所述，這是一個編輯的草稿，而不是最終的文檔)。如果事情發生了重大變化，請留下評論讓我知道，以便我可以更新這個答案！
4.2.RGB十六進制表示法:#RRGGBB 一個& lthex-color & gt；是一個& lt哈希令牌& gt其值由3、4、6或8個十六進制數字組成的令牌。換句話說，十六進制顏色被寫成一個散列字符“#”，后跟一些數字0-9或字母a-f(字母的大小寫無關緊要- #00ff00等同于#00ff00)。
8位數 前6位數字的解釋與6位數字符號相同。最后一對數字解釋為十六進制數，指定顏色的alpha通道，其中00表示完全透明的顏色，ff表示完全不透明的顏色。
例3換句話說，#0000ffcc代表與rgba(0，0，100%，80%)相同的顏色(微透明的藍色)。
4位數 這是8位數記數法的一個較短的變體，以與3位數記數法相同的方式“擴展”。第一個數字解釋為十六進制數，指定顏色的紅色通道，其中0表示最小值，f表示最大值。接下來的三個數字分別代表綠色、藍色和alpha通道。
這對CSS顏色的未來意味著什么？ 這意味著假設這沒有完全從Level 4文檔中刪除，我們將很快能夠在支持顏色模塊Level 4語法的瀏覽器中以十六進制格式定義我們的RGBA顏色(或者HSLA顏色，如果你是其中之一)。
例子
elem {
background: rgb(0, 0, 0); /* RGB notation (no alpha). */
background: #000; /* 3-digit hexadecimal notation (no alpha). */
background: #000000; /* 6-digit hexadecimal notation (no alpha). */
background: rgba(0, 0, 0, 1.0); /* RGBA notation. */
/* The new 4 and 8-digit hexadecimal notation. */
background: #0000; /* 4-digit hexadecimal notation. */
background: #00000000; /* 8-digit hexadecimal notation. */
}我什么時候可以在面向客戶的產品中使用它？
玩笑歸玩笑:現在才是2015年的開始，所以在相當長的一段時間內，任何瀏覽器都不會支持這些功能——即使你的產品只是設計用于最新的瀏覽器，你可能也不會很快在生產瀏覽器中看到這些功能。
查看當前瀏覽器對#RRGGBBAA顏色符號的支持
然而，也就是說，CSS的工作方式意味著我們今天就可以開始使用它們了！如果您真的想現在就開始使用它們，只要您添加一個后備，任何不支持的瀏覽器都會忽略這些新屬性，直到它們被認為是有效的:
figure {
margin: 0;
padding: 4px;
/* Fall back (...to browsers which don't support alpha transparency). */
background: #FEFE7F;
color: #3F3FFE;
/* Current 'modern' browser support. */
background: rgba(255, 255, 0, 0.5);
color: rgba(0, 0, 255, 0.75);
/* Fall... foward? */
background: #ffff007F; /* Or, less accurately, #ff08 */
color: #0000ffbe; /* Or #00fc */
}<figure>Hello, world!</figure>在發布了問題的增強后，我找到了答案。不好意思！
MS Excel幫忙了！
只需在十六進制顏色值上添加十六進制前綴，就可以添加與%值具有相同不透明度的alpha。
(在rbga中，不透明度百分比用如上所述的小數表示)
Opacity % 255 Step 2 digit HEX prefix
0% 0.00 00
5% 12.75 0C
10% 25.50 19
15% 38.25 26
20% 51.00 33
25% 63.75 3F
30% 76.50 4C
35% 89.25 59
40% 102.00 66
45% 114.75 72
50% 127.50 7F
55% 140.25 8C
60% 153.00 99
65% 165.75 A5
70% 178.50 B2
75% 191.25 BF
80% 204.00 CC
85% 216.75 D8
90% 229.50 E5
95% 242.25 F2
100% 255.00 FF#rrggbbaa符號在Chrome 62+和所有其他evergreen瀏覽器中完全受支持:
background: #56ff0077;Sass從十六進制顏色中提取紅、綠、藍通道:
background-color: rgba(red($hex_color), green($hex_color), blue($hex_color), 0.2);Sass還有rgba($hex_color，$alpha)
在Sass中，我們可以寫:
background-color: rgba(#ff0000, 0.5);就像用十六進制表示阿爾法通道的顏色那樣？
看這里http://www.w3.org/TR/css3-color/#rgba-color
這是不可能的，很可能是因為0xFFFFFFFF大于32位整數的最大值
恐怕這是不可能的。你知道的rgba格式是唯一的。
能少用的話，有淡化功能。
@my-opaque-color: #a438ab;
@my-semitransparent-color: fade(@my-opaque-color, 50%);
background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color);
// result:
background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5));如果你所有的顏色都是十六進制變量，你可以使用下面的SCSS代碼:
首先，將此映射從rgba -不透明度值復制到十六進制代碼:
$opacity-to-hex: (
0: '00',
0.05: '0C',
0.1: '19',
0.15: '26',
0.2: '33',
0.25: '3F',
0.3: '4C',
0.35: '59',
0.4: '66',
0.45: '72',
0.5: '7F',
0.55: '8C',
0.6: '99',
0.65: 'A5',
0.7: 'B2',
0.75: 'BF',
0.8: 'CC',
0.85: 'D8',
0.9: 'E5',
0.95: 'F2',
1: 'FF'
)然后復制以下使用映射的mixin:
@mixin color-opacity($property, $color, $opacity) {
#{$property}: unquote($color + map-get($opacity-to-hex, $opacity));
}最后但同樣重要的是，你可以在所有的顏色屬性上使用這個帶有映射不透明度的混合，例如:
@include color-opacity('background-color', $your_hex_color, 0.8);
@include color-opacity('color', $your_hex_color, 0.5);迷人的王子:
只有internet explorer允許ARGB格式的4字節十六進制顏色，其中A是Alpha通道。它可用于梯度過濾器，例如:
filter : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";其中dir可以是:1(水平)或0(垂直) 顏色字符串可以是十六進制顏色(#FFAAD3)或argb十六進制顏色(#88FFAAD3)。
嗯，不同的顏色符號是你需要學習的。 庫勒給你一個更好的機會找到顏色和多種符號。十六進制和RGB沒什么區別，FF = 255，00 = 0，但那是你知道的。所以在某種程度上，你必須把它形象化。 我使用十六進制，RGBA和RGB。除非需要大量轉換，否則手動這樣做會幫助您記住一些奇怪的100種顏色及其代碼。 對于大規模轉換，編寫一些類似阿拉里給出的腳本。盡情享受色彩。
在scss中，您可以使用以下內容:
background-color: rgba($color: #000088, $alpha: 0.5);在偽元素后使用an:怎么樣？
#myDiv{
position: relative;
width: 128px;
height: 128px;
background-color: #ccc;
}
#myDiv:after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* here you go */
margin: -8px;
border: solid 8px #00f;
opacity: 0.2;
}<div id="myDiv">hello world!</div>為什么不用 背景色:# ff0000 不透明度:0.5； 濾鏡:alpha(不透明度= 50)；/*在IE中*/
如果你的目標是一個文本或者可能是一個元素的顏色，這應該容易得多。