Bagaimana untuk menggunakan kelegapan pada pembolehubah warna CSS?
P粉495955986
2023-08-24 00:12:47
<p>Saya sedang mereka bentuk aplikasi menggunakan Electron supaya saya boleh mengakses pembolehubah CSS. Saya menentukan pembolehubah warna dalam vars.css: </p>
<pre class="brush:css;toolbar:false;">:root {
--warna: #f0f0f0;
}
</pra>
<p>Saya mahu menggunakan warna ini dalam <code>main.css</code> tetapi dengan sedikit kelegapan digunakan: </p>
<pre class="brush:css;toolbar:false;">#elemen {
latar belakang: (entah bagaimana gunakan var(--color) pada beberapa kelegapan);
}
</pra>
<p>Bagaimana saya boleh melakukannya? Saya tidak menggunakan sebarang prapemproses, cuma CSS. Saya lebih suka jawapan semua CSS, tetapi saya akan menerima JavaScript/jQuery. </p>
<p>Saya tidak boleh menggunakan <kod>opacity</code> kerana imej latar belakang yang saya gunakan 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 mengambil nilai warna sedia ada dan menggunakan saluran alfa padanya. Iaitu, anda tidak boleh mengambil nilai perenambelasan sedia ada (seperti
#f0f0f0), berikan komponen alfa dan gunakan nilai yang terhasil dengan sifat lain.Walau bagaimanapun, sifat tersuai membolehkan anda menukar nilai heks kepada tiga kali ganda RGB untuk digunakan dengan fungsi
rgba()一起使用，将该值存储在自定义属性中（包括逗号！），使用将var()转换为具有所需 alpha 值的rgba()dan ia akan berfungsi dengan baik::root { /* #f0f0f0 in decimal RGB */ --color: 240, 240, 240; } body { color: #000; background-color: #000; } #element { background-color: rgba(var(--color), 0.8); }