我知道你会写...
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 比例尺很烦人。
Three weeks ago (18th of December 2014) the CSS Color Module Level 4 editor's draft was submitted to the CSS W3C Working Group. Though in a state which is heavily susceptible to change, the current version of the document implies that in the somewhat near future CSS will support both the 4 and 8-digit hexadecimal RGBA notation.
Note: the following quote has irrelevant chunks cut out and the source may have been heavily modified by the time you read this (as mentioned above, it's an editor's draft and not a finalised document).
If things have heavily changed, please leave a comment letting me know so I can update this answer!
§ 4.2. The RGB hexadecimal notations: #RRGGBB
The syntax of a
<hex-color>is a<hash-token>token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, "#", followed by some number of digits0-9or lettersa-f(the case of the letters doesn’t matter -#00ff00is identical to#00FF00).8 digits
The first 6 digits are interpreted identically to the 6-digit notation. The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where
00represents a fully transparent color andffrepresent a fully opaque color.Example 3
In other words,#0000ffccrepresents the same color asrgba(0, 0, 100%, 80%)(a slightly-transparent blue).4 digits
This is a shorter variant of the 8-digit notation, "expanded" in the same way as the 3-digit notation is. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where
0represents the minimum value andfrepresents the maximum. The next three digits represent the green, blue, and alpha channels, respectively.
This means that assuming this isn't completely removed from the Level 4 document, we'll soon be able to define our RGBA colours (or HSLA colours, if you're one of those guys) in hexadecimal format in browsers which support the Color Module Level 4's syntax.
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. */
}
All jokes aside: it's currently only the start of 2015, so these will not be supported in any browser for quite some time yet - even if your product is only designed to work on the most up-to-date of browsers you'll probably not be seeing this in action in a production browser any time soon.
View current browser support for #RRGGBBAA color notation
However, that said, the way CSS works means that we can actually start using these today! If you really want to start using them right now, as long as you add a fall back any non-supporting browsers will simply ignore the new properties until they are deemed valid:
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>As long as you're viewing this answer on a browser which supports the background and color properties in CSS, the <figure> element in result of the above snippet will look very similar to this:
Using the most recent version of Chrome on Windows (v39.0.2171) to inspect our <figure> element, we'll see the following:
The 6-digit hexadecimal fall back is overridden by the rgba() values, and our 8-digit hexadecimal values are ignored as they are currently deemed invalid by Chrome's CSS parser. As soon as our browser supports these 8-digit values, these will override the rgba() ones.
UPDATE 2018-07-04: Firefox, Chrome and Safari are support this notation now, Edge still missing but will probably follow (https://caniuse.com/#feat=css-rrggbbaa).
在发布对问题的增强后，我找到了答案。对不起！
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
RGB='#ffabcd';
A='0.5';
RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')';
Chrome 52+支持alpha hex：
background: #56ff0077;
使用red, green,blue转换为 RGBA：
background-color: rgba(red($color), green($color), blue($color), 0.2);
见这里http://www.w3.org/TR/css3-color/#rgba-color
这是不可能的，很可能是因为 0xFFFFFFFF 大于 32 位整数的最大值
恐怕这是不可能的。你知道的rgba格式是唯一的。
如果可以使用LESS，则有淡入淡出功能。
@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));
如果您在 HEX 变量中包含所有颜色，则可以使用以下 SCSS 代码：
首先，将此映射从 rgba - opacity 值复制到十六进制代码：
$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));
}
最后但并非最不重要的一点是，您可以将此 mixin 与所有颜色属性上的映射不透明度一起使用，例如：
@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）。
嗯，不同的颜色符号是你必须学习的。
Kuler让您有更好的机会找到颜色和多种符号。
Hex 与 RGB 没有什么不同，FF = 255 和 00 = 0，但这就是你所知道的。所以在某种程度上，你必须把它形象化。
我使用十六进制、RGBA 和 RGB。除非需要大量转换，否则手动执行此操作将帮助您记住一些奇怪的 100 种颜色及其代码。
对于大规模转换，请编写一些脚本，例如 Alarie 给出的脚本。尽情享受色彩吧。
使用 :after 伪元素怎么样？
#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>为什么不使用
background-color: #ff0000;
opacity: 0.5;
filter: alpha(opacity=50); /* in IE */
如果您针对文本或可能是元素的颜色，这应该更容易做到。