Bagaimana untuk menggunakan ketelusan pada pembolehubah warna CSS?

Question

Saya sedang mereka bentuk apl menggunakan Electron supaya saya boleh mengakses pembolehubah CSS. Saya menentukan pembolehubah warna dalam vars.css:

:root {
  --color: #f0f0f0;
}

Saya mahu menggunakan warna ini dalam main.css tetapi dengan sedikit kelegapan digunakan:

#element {
  background: (somehow use var(--color) at some opacity);
}

Bagaimana saya boleh melakukannya? Saya tidak menggunakan sebarang prapemproses, cuma CSS. Saya lebih suka jawapan semua CSS, tetapi saya akan menerima JavaScript/jQuery.

Saya tidak boleh menggunakan opacity kerana imej latar belakang yang saya gunakan tidak sepatutnya telus.

Answer 1

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);
}

If you can see this, your browser supports custom properties.