原文:Div Background Color – How to Change Background Color in CSS,作者:Kolade Chris

如果你正在做一个网站开发项目,设置一个漂亮的背景色可以让网站看起来更有吸引力。

要在 CSS 中为一个 div 或相关元素设置背景色,你可以使用 background-color 属性。

在设置背景色时,只要你有创造力,就可以任意发挥。

所以在这篇文章中,我将向你展示如何设置背景色。

如何用命名的颜色设置背景色

使用命名颜色,你可以通过引入 background-color 属性并为其赋值如 redgreenblue等颜色名称来设置背景颜色。

 div {
      background: green;
    }
ss-1-1

你可以使用以下样式使网页看起来更好。只要给 div 设置一个宽高,背景色就可以生效:

body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   background-color: #d3d3d3;
 }

div {
   background: green;
 }

现代浏览器可以识别大约 147 种颜色,因此你仍然受到一些限制。

如何使用十六进制颜色设置背景颜色

使用十六进制值,你可以为 div 或任何其他总共 6 个字符的元素设置背景颜色。

十六进制颜色以井号(#)开头,然后是从 0 到 9 的任何数字,最后是从 A 到 F 的任何字母。

前两个值代表红色,接下来的两个代表绿色,最后两个代表蓝色。

使用十六进制值,你可以深入了解色轮,甚至可以使用从未使用过的颜色。

div {
   background: #2ecc71;
 }
ss-2-1

你可以阅读更多关于十六进制颜色的信息

如何用 RGB 颜色设置背景色

RGB 是红、绿、蓝的缩写。

要用 RGB 设置背景色,你要用 0 到 255 之间的数字来指定你想要的红色、绿色和蓝色的数量。

div {
      background: rgb(220, 20, 60);
    }
ss-3

RGB 也有一个变体,叫做 RGBA。最后一个 A 表示 alpha,它让你决定你想要的颜色的不透明程度。

alpha 的数值从 0.0 到 1.0。0.0 表示 0% 不透明,0.5 表示 50% 不透明,1.0 表示 100% 不透明。

div {
    background: rgb(220, 20, 60, 0.6);
 }
ss-4

你可以阅读更多关于 RGB 颜色的信息

如何使用 HSL 颜色设置背景颜色

HSL 代表色相(Hue)、饱和度(Saturation)和亮度(lightness)。在你可以为 div 或其他元素指定背景颜色的方式中,它是最动态的。

  • 色调代表 360° 的色轮。0° 为红色,120° 为绿色,240° 为蓝色
  • 饱和度是以百分比表示的颜色中的灰色量,0% 是灰色阴影,100% 是颜色本身
  • 顾名思义,亮度是颜色中暗度和明度的百分比,以百分比表示,0% 为黑色,100% 为白色
div {
   background: hsl(16, 100%, 50%);
 }
ss-5

总结

由于你可以用 4 种不同的方式来应用颜色,你一定想知道你应该使用哪一种。

当你使用命名的颜色时,你在应用不同颜色的深浅方面受到了某种限制。

每种颜色,如红色、绿色、蓝色、黄色或任何其他颜色,都有很多变化,你无法使用命名颜色。

你只能获得浏览器认可的大约 147 种预定义的颜色。另一方面,十六进制的颜色是非常动态的,主要是开发者使用它们,可以随意发挥。这些十六进制颜色允许你使用同一颜色的不同色调。

RGB 颜色和十六进制颜色一样是动态的。你可以指定从 0 到 255 的红、绿、蓝的数量,你还可以使用添加的 alpha 值来指定颜色的透明度。

HSL 是所有这些中最有活力的。你可以准确地指定色轮中从 0 到 360 度的颜色,将饱和度和暗度设置为百分比,并将不透明度设置为 0.0 到 1.0 之间的任何数值。

因此,决定在命名的、十六进制的、RGB 和 HSL 颜色之间使用哪一种,取决于你想有多大的创意,以及你的项目需求是什么。

谢谢你阅读本文。