Bagaimana untuk menggunakan ketelusan dalam pembolehubah warna CSS?
P粉348088995
P粉348088995 2023-08-20 18:51:07
0
1
456
<p>Saya sedang mereka bentuk aplikasi dalam elektron supaya saya boleh mengakses pembolehubah CSS. Saya menentukan pembolehubah warna dalam <code>vars.css</code>: </p> <pre class="brush:css;toolbar:false;">:root { --warna: #f0f0f0; } </pra> <p>Saya mahu menggunakan warna ini dalam <kod>utama.css</kod> <pre class="brush:css;toolbar:false;">#elemen { latar belakang: (entah bagaimana gunakan var(--color) dan tetapkan beberapa ketelusan); } </pra> <p>Bagaimana saya boleh melakukannya? Saya tidak menggunakan sebarang prapemproses, cuma CSS. Saya lebih suka jawapan CSS tulen, tetapi saya juga terbuka kepada penyelesaian JavaScript/jQuery. </p> <p>Saya tidak boleh menggunakan <kod>opacity</code> kerana saya menggunakan imej latar belakang yang tidak sepatutnya telus. </p>
P粉348088995
P粉348088995

membalas semua(1)
P粉458725040

Anda tidak boleh menggunakan saluran alfa pada nilai warna sedia ada. Iaitu, anda tidak boleh menambah komponen alfa pada nilai hex sedia ada (cth. #f0f0f0) dan menggunakan nilai yang terhasil dengan atribut lain.

Walau bagaimanapun, sifat tersuai membolehkan anda menukar nilai heks kepada triplet RGB untuk digunakan dengan fungsi rgba()一起使用,将该值存储在自定义属性中(包括逗号!),使用var()将该值替换为具有所需alpha值的rgba() dan ia akan berfungsi dengan baik:

:root {
  /* #f0f0f0转换为十进制RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}
<p id="element">如果您能看到这个,说明您的浏览器支持自定义属性。</p>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan