Bagaimana untuk menggunakan ketelusan dalam pembolehubah warna CSS?
P粉348088995
2023-08-20 18:51:07
<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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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); }