📜  CSS 颜色调整属性(1)

📅  最后修改于: 2023-12-03 15:14:22.836000             🧑  作者: Mango

CSS 颜色调整属性

CSS 颜色调整属性可以帮助我们调整文本、背景、边框或其他元素的颜色。这些属性可以让我们使用预设的名称或十六进制代码指定颜色,或者让我们在一个范围内选择颜色。下面列出了一些常用的 CSS 颜色调整属性:

color

color 属性指定文本的颜色。值可以是预设的颜色名称、十六进制颜色代码或 RGB 值。以下是几个例子:

p {
  color: red; /* 使用预设的颜色名称 */
}

h1 {
  color: #336699; /* 使用十六进制颜色代码 */
}

h2 {
  color: rgb(255, 0, 255); /* 使用 RGB 值 */
}
background-color

background-color 属性指定背景的颜色。值可以是预设的颜色名称、十六进制颜色代码或 RGB 值。以下是几个例子:

body {
  background-color: white; /* 使用预设的颜色名称 */
}

div {
  background-color: #f2f2f2; /* 使用十六进制颜色代码 */
}

span {
  background-color: rgb(0, 128, 0); /* 使用 RGB 值 */
}
border-color

border-color 属性指定边框的颜色。值可以是预设的颜色名称、十六进制颜色代码或 RGB 值。以下是几个例子:

box {
  border: 1px solid black; /* 边框样式和颜色 */
}

img {
  border-color: #ccc; /* 使用十六进制颜色代码 */
}

table {
  border-color: rgb(255, 0, 0); /* 使用 RGB 值 */
}
opacity

opacity 属性指定元素的不透明度。它的值可以是从 0(完全透明)到 1(完全不透明)的数字。以下是几个例子:

button {
  opacity: 0.5; /* 半透明 */
}

img {
  opacity: 0.8; /* 更近于不透明 */
}

div {
  opacity: 1; /* 完全不透明 */
}

以上是一些常用的 CSS 颜色调整属性。通过它们,我们可以轻松地调整文本、背景、边框或其他元素的颜色和透明度。