背景颜色

CSS 中的 background-color 属性将纯色应用于元素的背景。以下是一个示例

html {
  background-color: #82a43a; 
}

上面使用的示例 (#82a43a) 被称为十六进制代码，它是 CSS 用于表示单一颜色的几种方法之一。有很多方法可以找到正确的十六进制代码。任何使用过设计工具的人都会看到类似于此的颜色选择器

十六进制代码是 CSS 中声明颜色的方法之一。您还可以使用大量名称，例如

.page-wrap { background: white; }
footer { background: black; }
.almonds { background: blanchedAlmond; }

这些颜色并不灵活，但在紧急情况下很有用。它们比十六进制代码更容易记忆，而且有很多颜色。

声明颜色的另一种方法是使用 RGB、RGBa、HSL 或 HSLa

#page-wrap {
  background: rgba(0, 0, 0, 0.8); /* 80% Black */
}
.widget {
  background: hsla(170, 50%, 45%, 1);
}

与十六进制代码不同，这些值允许透明度（alpha），这非常有用。了解有关 RGBa 或 HSLa 的更多信息。

演示

浏览器支持

IE	Edge	Chrome	Firefox	Safari	Opera
全部	全部	全部	全部	全部	全部

iOS Safari	Chrome Android	Firefox Android	Android 浏览器	Opera Mobile
全部	全部	全部	90+	62+

来源：caniuse

CSS 基础：使用备用颜色

Chris Coyier

文章于 2018 年 10 月 27 日

CSS 基础：使用多个背景

Chris Coyier

文章于 2016 年 3 月 4 日

设计注意事项：图像上的文本

Chris Coyier

文章于 2020 年 2 月 20 日

使用“rect”元素为 SVG 添加背景颜色

Kate Holterhoff

文章于 2019 年 12 月 27 日

CSS 自定义属性的 7 种用法

Chris Coyier

年鉴于 2021 年 5 月 20 日

背景

.element { background: url(texture.svg) top center / 200px 200px no-repeat fixed #f8a100; }

Sara Cope

年鉴于 2017 年 6 月 6 日

背景附件

.hero { background-attachment: fixed; }

Chris Coyier

年鉴于 2021 年 5 月 20 日

背景混合模式

.element { background-blend-mode: screen; }

Robin Rendle

年鉴于 2021 年 5 月 20 日

背景裁剪

.element { background-clip: padding-box; }

Chris Coyier

年鉴于 2021 年 5 月 20 日

element{ background-color: #ff7a18; }

Chris Coyier

年鉴于 2022 年 9 月 28 日

背景图片

.element { background: url(texture.svg); }

Chris Coyier

年鉴于 2021 年 5 月 20 日

背景起源

.element { background-origin: border-box; }

Chris Coyier

年鉴于 2021 年 6 月 2 日

背景位置

.element { background-position: 100px 5px; }

Chris Coyier

年鉴于 2024 年 5 月 21 日

背景重复

.element { background-repeat: repeat-x; }

Geoff Graham

年鉴于 2021 年 5 月 20 日

background-size

.element { background-size: 300px 100px; }

Chris Coyier

吉列德

# 2015 年 8 月 29 日

有没有办法缩短背景色的长度？在制作网站时，我喜欢使用 CSS 的 background-color 属性。但是，当使用 3-4 个字母的短词时，背景色会占据整个页面的长度。我有时只想使用一小块颜色！请帮忙！谢谢。

Amen Machewu

评论永久链接# 2016 年 11 月 19 日

backgroud:#333; background: rgb(0,0,0,0,7);

Amrit

# 2015 年 10 月 1 日

在 rgba() 格式中，是否可以只指定 alpha 值？我需要在悬停时单独覆盖 alpha 值。

泰勒

评论永久链接# 2016 年 3 月 30 日
你可以通过再次写出具有相同颜色和新 alpha 值的 CSS 属性来覆盖 :hover 上的 alpha 值。
```
div{
    background-color: rgba(0,0,0,1);
}
div:hover{
    background-color: rgba(0,0,0,0.7);
}
```

戈帕尔·夏尔马

# 2016 年 3 月 30 日

你好，

在 rgba() 中定义“Alfa”的最佳值是什么？因为我总是将这个 Alfa 坐标用作小数（0.1 – 0.9），作为 rgba() 中声明的透明度。我知道它也有从“1-255”的值。但是，如果我们想将颜色定义为简单的 rgb()，如果我们从“1-255”声明“Alfa”，它总是等于 rgba()，请告诉我。

Amen Machewu

# 2016 年 11 月 19 日

我喜欢使用十六进制，如何在 rgb 中放置渐变？

演示

浏览器支持

更多信息

相关属性

评论

发表评论 取消回复

发表评论取消回复