16进制的透明颜⾊css_在CSS中使⽤⼗六进制颜⾊
16进制的透明颜⾊css
Standard CSS color keywords are limited to 149 named shades; the hexadecimal (or “hex”) color method has access to the full RGB gamut. The key to learning hex is understanding the hexadecimal counting system.
标准CSS颜⾊关键字仅限于149个命名阴影。 ⼗六进制(或“⼗六进制”)颜⾊⽅法可以访问整个RGB ⾊域 。 学习⼗六进制的关键是了解⼗六进制计数系统。
Unlike our familiar base-10 system, with integers from 0 to 9, the hexadecimal system has 16 digits: 0 to 9, followed by a to f. In the most common variant, hex color components - red, green and blue - are represented by two pairs of digits each.
与我们熟悉的base-10系统不同(整数从0到9),⼗六进制系统有16位数字: 0到9 ,后跟a到f 。 在最常见的变体中,⼗六进制颜⾊分量(红⾊,绿⾊和蓝⾊)分别由两对数字表⽰。
Used in pairs this way, the lowest value of a color component would be 00. One step higher would be 01, followed by 02, etc. After 09, the number pair moves to 0a, then 0b, until it gets to 0f. At that point, t
he first digit rolls over like an odometer, and the last one resets, becoming 10. At that point, the last digit starts ticking upwards again.
以这种⽅式成对使⽤,颜⾊分量的最⼩值将为00 。 更⾼的是01 ,然后是02 , 依此类推 。在09之后,数字对移⾄0a ,然后移⾄0b ,直到移⾄0f 。 此时,第⼀个数字像⾥程表⼀样翻转,最后⼀个数字重置,变为10 。 此时,最后⼀位开始再次向上跳动。
The higher the value for a component, the more “strength” or “input” it has in the final color - 00 represents no input of a color component, and ff represents a total commitment of a component. The complete hexadecimal color is preceeded by a # symbol. So #000000 would represent black - no input from red, green or blue - while white would be #ffffff, and #ffff00 yellow.
组件的值越⾼,它在最终颜⾊中的“强度”或“输⼊”就越多-00表⽰没有颜⾊组件的输⼊,⽽ff表⽰组件的总投⼊。 完整的⼗六进制颜⾊以#符号开头。 因此, #000000代表⿊⾊-红⾊,绿⾊或蓝⾊均不输⼊-⽩⾊则为#ffffff和#ffff00黄⾊。
Note that CSS hexadecimal color is an additive color system where no input means black (i.e. the default color of your screen).
请注意,CSS⼗六进制颜⾊是⼀种附加颜⾊系统,其中没有输⼊表⽰⿊⾊(即屏幕的默认颜⾊)。
记住他 (Remembering Hexes)
A simple mnemonic to remember base-16 for color is to think of each color component (red, green and blue) as a seperate flashlight with an appropriate filter on it. In hex, 00 means “off”, and ff means “flashlight full on”.
要记住以16为基数的颜⾊,⼀个简单的助记符就是将每个颜⾊成分(红⾊,绿⾊和蓝⾊)看作是⼀个单独的⼿电筒,上⾯带有合适的滤镜。以⼗六进制表⽰, 00表⽰“关闭”, ff表⽰“⼿电筒已满”。
Used in a dark room, turning on only the red flashlight (#ff0000) will make everything appear to be red. Turning on the red and green flashlights and converging their beams (#ffff00) will make the room appear yellow.
在⿊暗的房间中使⽤时, 仅打开红⾊⼿电筒( #ff0000 )将使所有物体看起来都是红⾊的。 打开红⾊和绿⾊的⼿电筒并会聚其光束(
#ffff00 )将使房间显得黄⾊。
Taken further, you can think of each flashlight with a dimmer switch - from 00 to ff, so #777777 would be a mid-level grey, and #440000 would be a dark red.
更进⼀步,您可以想到每个带有调光开关的⼿电筒-从00到ff ,因此#777777将是中级灰⾊,⽽#440000将是深红⾊。
捷径 (Shortcuts)
are created when the number in each color pair is the same (00, 77, ee, etc). These colors used to be particularly relevant when screen displays had a very limited color range; they’re not common or necessary now.
时在每个颜⾊对的数量是相同的(00,77,EE,等)被创建。 当屏幕显⽰的颜⾊范围⾮常有限时,这些颜⾊曾经特别相关。 它们现在并不常见或没有必要。
If you happen to use a web safe color, it does have one advantage - all web safe colors provide the option to shortcut the hexidecimal code. For example, black becomes #000, pure red #f00, etc. For example:
如果您碰巧使⽤⽹络安全⾊,则它确实具有⼀个优势-所有⽹络安全⾊都提供了快捷⽅式以⼗六进制代码的选项。 例如,⿊⾊变为#000
,纯红⾊变为#f00 ,等等。例如:
p {
color: #000;
}
Shortcutting hexadecimal values has one potential weak point: accidentally typing in four digits, rather than three, will invoke the in supporting browsers.
Shortcutting⼗六进制值存在⼀个潜在的薄弱点:在四位数 ,⽽不是三个意外打字时,将调⽤在⽀持的浏览器。
The hexadecimal values do not have to be the same for each pair: #3fa027 is a perfectly valid hex color, but can’t be shortcut.
每个对的⼗六进制值不必相同: #3fa027是完全有效的⼗六进制颜⾊,但不能是快捷⽅式。
It’s important to understand that hexadecimal allows access to the same gamut as the two other primary CSS color systems (RGB and HSL); the color variety is not greater or less in hex.
重要的是要了解⼗六进制允许访问与其他两个主要CSS颜⾊系统(RGB和HSL)相同的⾊域。 颜⾊变化的⼤⼩不⼤于或⼩于⼗六进制。
⼗六进制的Alpha (Alpha in Hex)
The latest specification for CSS color allows hexidecimal colors to include an an alpha or opacity component, added as
#RRGGBBAA or #RGBA. I discuss this in a .
最新CSS颜⾊规范允许⼗六进制颜⾊包含alpha或不透明成分,并添加为#RRGGBBAA或#RGBA 。 我将在对此进⾏讨论。
优点缺点 (Advantages & Disadvantages)
As a color system for web design and development, hexadecimal has both strengths and weaknesses:
作为⽤于⽹页设计和开发的颜⾊系统,⼗六进制既有优点也有缺点:
优点 (Advantages)
Simple primaries like red, black and white are very quick to write, especially as shortcuts.
诸如红⾊,⿊⾊和⽩⾊之类的简单基元⾮常容易编写,尤其是作为快捷⽅式。
Hexadecimal color codes are understood by absolutely every browser.
css最新
⼏乎所有浏览器都可以理解⼗六进制颜⾊代码。
缺点 (Disadvantages)
With the exception of primaries, hex color codes are difficult to write and adjust accurately, usually requiring use of a third-party application to get right.
除基⾊外,⼗六进制颜⾊代码难以准确编写和调整,通常需要使⽤第三⽅应⽤程序才能正确设置。
Hexadecimal color codes are challenging and counter-intuitive for designers.
⼗六进制颜⾊代码对设计⼈员来说是具有挑战性和违反直觉的。For further details, see the .
有关更多详细信息,请参见 。
16进制的透明颜⾊css