Kata Kunci Warna CSS

Bab ini akan menggambarkan transparent、currentcolor dan inherit Kata kunci.

Kata kunci transparent

transparent Kata kunci digunakan untuk membuat warna transparen. Ini biasanya digunakan untuk menata warna latar belakang transparen elemen.

实例

Di sini, warna latar belakang elemen <div> akan sepenuhnya transparen, dan gambar latar akan muncul:

body {
  background-image: url("paper.gif");
}
div {
  background-color: transparent;
}

亲自试一试

Perhatian:transparent Kata kunci setara dengan rgba(0,0,0,0)Nilai warna RGBA adalah ekspansi nilai warna RGB, dengan jalur alpha - ia menentukan kecerahan warna. Untuk informasi lebih lanjut, lihat referensi kami CSS RGB Bab dan Warna CSS Bab.

Kata kunci currentcolor

currentcolor Kata kunci ini mirip seperti sebuah variabel, yang menyimpan nilai warna saat ini dari atribut color elemen.

Jika Anda ingin warna tertentu tetap konsisten di dalam elemen atau halaman, kata kunci ini akan sangat berharga.

实例

Dalam contoh ini, warna garis batas elemen <div> akan menjadi biru, karena warna teks elemen <div> adalah biru:

div {
  color: blue;
  border: 10px solid currentcolor;
}

亲自试一试

实例

Dalam contoh ini, warna latar belakang <div> diatur menjadi nilai warna saat ini elemen <body>:

body {
  color: purple;
}
div {
  background-color: currentcolor;
}

亲自试一试

实例

在这个例子中，<div> 的边框颜色和阴影颜色设置为 body 元素的当前颜色值：

body {
 color: green;
}
div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

亲自试一试

关键字 inherit

inherit 关键字指定属性应从其父元素继承其值。

inherit 关键字可用于任何 CSS 属性，并且可用于任何 HTML 元素。

实例

在这个例子中，<span> 的边框设置将从父元素继承：

div {
  border: 2px solid red;
}
span {
  border: inherit;
}

亲自试一试