HTML背景颜色

今天的网站比以往都要大胆和明亮。有了这个快速教程，您也能够学会如何使用Hex颜色代码、HTML颜色名称、RGB和HSL值，运用HTML背景颜色魔法点亮您的网站。

背景颜色使用Hex颜色代码

设置网页背景颜色其实相当简单。第一种也是最重要的一种方法就是使用Hex颜色代码的背景颜色属性。这里我们使用样式属性将Hex颜色直接应用于HTML<body>元素。 

HTML

<body style="background-color:#FF0000;">
</body>
演示的CodePen

这种方法同样可用于任何HTML元素样式，但是要记住它们的运转可能会因它们是内联还是块级元素而有所不同。使用我们的颜色选择器或颜色表寻找Hex颜色代码。

背景颜色使用HTML颜色名称

Hex颜色代码可能是最流行的，但它们也仅仅是设置HTML元素颜色的许多方法的其中一种。第二种方法是使用HTML颜色名称；只需将Hex代码替换为140种支持颜色名称之一就可以了。 

HTML

<body style="background-color:red;">
</body>
演示的CodePen

这里是一份包括所有140种HTML颜色名称颜色名称及其对应的Hex和RGB值的列表，是很有用的参考资料。

背景颜色使用RGB颜色值

RGB值也可用于HTML元素加入背景颜色。使用与之前同样的样式属性，将Hex代码或颜色名称替换为适当格式的RGB值（确保将其用括号括起来，并以小写'rgb'为前缀）。 

HTML

<body style="background-color:rgb(255,0,0);">
</body>
演示的CodePen

在HTML中使用RGB值时，您还可选择指定不透明的程度。以rgba()为前缀――a代表α，控制透明度的通道――您可以插入第四个值，范围在0和1之间，0表示完全透明，1表示完全不透明（中间使用小数数值）。 

HTML

<body style="background-color:rgba(255,0,0,0.5);">
</body>
演示的CodePen

背景颜色使用HSL颜色值

HSL值的流行程度稍逊但同样非常强大，目前已有许多现代浏览器支持。如果您不熟悉HSL（代表色相、饱和度和亮度），快去维基百科了解一下它们为何如此优秀。如果您只希望将其用于HTML背景颜色，采用上述RGB值的相同语法，但是前缀改为hsl()。 

HTML

<body style="background-color:hsl(0,100%,50%);">
</body>
演示的CodePen

HSL与他们的RGB兄弟一样，也可以通过α通道来控制不透明度。使用hsla()前缀，插入第四个值，范围在0和1之间。 

HTML

<body style="background-color:hsla(0,100%,50%,0.5);">
</body>
演示的CodePen