原文:Div Background Color – How to Change Background Color in CSS,作者:Kolade Chris
如果你正在做一个网站开发项目,设置一个漂亮的背景色可以让网站看起来更有吸引力。
要在 CSS 中为一个 div
或相关元素设置背景色,你可以使用 background-color
属性。
在设置背景色时,只要你有创造力,就可以任意发挥。
所以在这篇文章中,我将向你展示如何设置背景色。
如何用命名的颜色设置背景色
使用命名颜色,你可以通过引入 background-color
属性并为其赋值如 red
、green
、blue
等颜色名称来设置背景颜色。
div {
background: green;
}
你可以使用以下样式使网页看起来更好。只要给 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;
}
你可以阅读更多关于十六进制颜色的信息。
如何用 RGB 颜色设置背景色
RGB 是红、绿、蓝的缩写。
要用 RGB 设置背景色,你要用 0 到 255 之间的数字来指定你想要的红色、绿色和蓝色的数量。
div {
background: rgb(220, 20, 60);
}
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);
}
你可以阅读更多关于 RGB 颜色的信息。
如何使用 HSL 颜色设置背景颜色
HSL 代表色相(Hue)、饱和度(Saturation)和亮度(lightness)。在你可以为 div
或其他元素指定背景颜色的方式中,它是最动态的。
- 色调代表 360° 的色轮。0° 为红色,120° 为绿色,240° 为蓝色
- 饱和度是以百分比表示的颜色中的灰色量,0% 是灰色阴影,100% 是颜色本身
- 顾名思义,亮度是颜色中暗度和明度的百分比,以百分比表示,0% 为黑色,100% 为白色
div {
background: hsl(16, 100%, 50%);
}
总结
由于你可以用 4 种不同的方式来应用颜色,你一定想知道你应该使用哪一种。
当你使用命名的颜色时,你在应用不同颜色的深浅方面受到了某种限制。
每种颜色,如红色、绿色、蓝色、黄色或任何其他颜色,都有很多变化,你无法使用命名颜色。
你只能获得浏览器认可的大约 147 种预定义的颜色。另一方面,十六进制的颜色是非常动态的,主要是开发者使用它们,可以随意发挥。这些十六进制颜色允许你使用同一颜色的不同色调。
RGB 颜色和十六进制颜色一样是动态的。你可以指定从 0 到 255 的红、绿、蓝的数量,你还可以使用添加的 alpha 值来指定颜色的透明度。
HSL 是所有这些中最有活力的。你可以准确地指定色轮中从 0 到 360 度的颜色,将饱和度和暗度设置为百分比,并将不透明度设置为 0.0 到 1.0 之间的任何数值。
因此,决定在命名的、十六进制的、RGB 和 HSL 颜色之间使用哪一种,取决于你想有多大的创意,以及你的项目需求是什么。
谢谢你阅读本文。