我知道你能寫...
background-color: #ff0000;...如果你想要紅色的東西。
你可以寫作...
background-color: rgba(255, 0, 0, 0.5);...如果你想要紅色半透明的東西。
有沒有什么簡潔的十六進(jìn)制寫部分透明顏色的方法？我想要這樣的東西:
background-color: #ff000088; <--- the 88 is the alpha...或者...
background-color: #ff0000 50%;我所有的顏色都是十六進(jìn)制的，必須把它們都轉(zhuǎn)換成十進(jìn)制的0-255范圍，這很煩人。
三周前(2014年12月18日), CSS顏色模塊4級編輯草案被提交給CSS W3C工作組。盡管處于易受變化影響的狀態(tài)，文檔的當(dāng)前版本意味著在不遠(yuǎn)的將來CSS將同時(shí)支持4位和8位十六進(jìn)制RGBA符號。
注意:下面的引用刪除了不相關(guān)的部分，當(dāng)你讀到這里的時(shí)候，源代碼可能已經(jīng)被大量修改了(如上所述，這是一個(gè)編輯的草稿，而不是最終的文檔)。如果事情發(fā)生了重大變化，請留下評論讓我知道，以便我可以更新這個(gè)答案！
4.2.RGB十六進(jìn)制表示法:#RRGGBB 一個(gè)& lthex-color & gt；是一個(gè)& lt哈希令牌& gt其值由3、4、6或8個(gè)十六進(jìn)制數(shù)字組成的令牌。換句話說，十六進(jìn)制顏色被寫成一個(gè)散列字符“#”，后跟一些數(shù)字0-9或字母a-f(字母的大小寫無關(guān)緊要- #00ff00等同于#00ff00)。
8位數(shù) 前6位數(shù)字的解釋與6位數(shù)字符號相同。最后一對數(shù)字解釋為十六進(jìn)制數(shù)，指定顏色的alpha通道，其中00表示完全透明的顏色，ff表示完全不透明的顏色。
例3換句話說，#0000ffcc代表與rgba(0，0，100%，80%)相同的顏色(微透明的藍(lán)色)。
4位數(shù) 這是8位數(shù)記數(shù)法的一個(gè)較短的變體，以與3位數(shù)記數(shù)法相同的方式“擴(kuò)展”。第一個(gè)數(shù)字解釋為十六進(jìn)制數(shù)，指定顏色的紅色通道，其中0表示最小值，f表示最大值。接下來的三個(gè)數(shù)字分別代表綠色、藍(lán)色和alpha通道。
這對CSS顏色的未來意味著什么？ 這意味著假設(shè)這沒有完全從Level 4文檔中刪除，我們將很快能夠在支持顏色模塊Level 4語法的瀏覽器中以十六進(jìn)制格式定義我們的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. */
}我什么時(shí)候可以在面向客戶的產(chǎn)品中使用它？
玩笑歸玩笑:現(xiàn)在才是2015年的開始，所以在相當(dāng)長的一段時(shí)間內(nèi)，任何瀏覽器都不會支持這些功能——即使你的產(chǎn)品只是設(shè)計(jì)用于最新的瀏覽器，你可能也不會很快在生產(chǎn)瀏覽器中看到這些功能。
查看當(dāng)前瀏覽器對#RRGGBBAA顏色符號的支持
然而，也就是說，CSS的工作方式意味著我們今天就可以開始使用它們了！如果您真的想現(xiàn)在就開始使用它們，只要您添加一個(gè)后備，任何不支持的瀏覽器都會忽略這些新屬性，直到它們被認(rèn)為是有效的:
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>在發(fā)布了問題的增強(qiáng)后，我找到了答案。不好意思！
MS Excel幫忙了！
只需在十六進(jìn)制顏色值上添加十六進(jìn)制前綴，就可以添加與%值具有相同不透明度的alpha。
(在rbga中，不透明度百分比用如上所述的小數(shù)表示)
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從十六進(jìn)制顏色中提取紅、綠、藍(lán)通道:
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);就像用十六進(jìn)制表示阿爾法通道的顏色那樣？
看這里http://www.w3.org/TR/css3-color/#rgba-color
這是不可能的，很可能是因?yàn)?xFFFFFFFF大于32位整數(shù)的最大值
恐怕這是不可能的。你知道的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));如果你所有的顏色都是十六進(jìn)制變量，你可以使用下面的SCSS代碼:
首先，將此映射從rgba -不透明度值復(fù)制到十六進(jìn)制代碼:
$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'
)然后復(fù)制以下使用映射的mixin:
@mixin color-opacity($property, $color, $opacity) {
#{$property}: unquote($color + map-get($opacity-to-hex, $opacity));
}最后但同樣重要的是，你可以在所有的顏色屬性上使用這個(gè)帶有映射不透明度的混合，例如:
@include color-opacity('background-color', $your_hex_color, 0.8);
@include color-opacity('color', $your_hex_color, 0.5);迷人的王子:
只有internet explorer允許ARGB格式的4字節(jié)十六進(jìn)制顏色，其中A是Alpha通道。它可用于梯度過濾器，例如:
filter : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";其中dir可以是:1(水平)或0(垂直) 顏色字符串可以是十六進(jìn)制顏色(#FFAAD3)或argb十六進(jìn)制顏色(#88FFAAD3)。
嗯，不同的顏色符號是你需要學(xué)習(xí)的。 庫勒給你一個(gè)更好的機(jī)會找到顏色和多種符號。十六進(jìn)制和RGB沒什么區(qū)別，F(xiàn)F = 255，00 = 0，但那是你知道的。所以在某種程度上，你必須把它形象化。 我使用十六進(jìn)制，RGBA和RGB。除非需要大量轉(zhuǎn)換，否則手動這樣做會幫助您記住一些奇怪的100種顏色及其代碼。 對于大規(guī)模轉(zhuǎn)換，編寫一些類似阿拉里給出的腳本。盡情享受色彩。
在scss中，您可以使用以下內(nèi)容:
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中*/
如果你的目標(biāo)是一個(gè)文本或者可能是一個(gè)元素的顏色，這應(yīng)該容易得多。