Bagaimanakah Saya Boleh Menggunakan Kelegapan pada Pembolehubah Warna CSS Semasa Memelihara Imej Latar Belakang?

Cara Menggunakan Kelegapan pada Pembolehubah Warna CSS

Cabaran:

Apabila mereka bentuk apl dengan pembolehubah CSS, anda mungkin menghadapi keperluan untuk menggunakan kelegapan pada pembolehubah warna yang ditentukan. Walau bagaimanapun, kelegapan CSS standard tidak mencukupi kerana anda ingin mengekalkan imej latar belakang.

Penyelesaian: Manipulasi RGBA

Sifat tersuai CSS membenarkan penyelesaian yang unik. Dengan menukar nilai warna heks kepada triplet RGB menggunakan koma, anda boleh menyimpannya sebagai sifat tersuai. Menggunakan fungsi var(), anda boleh menggantikan nilai ini ke dalam fungsi rgba(), menyatakan nilai alfa yang diingini.

Sebagai contoh, diberikan pembolehubah warna:

:root {
  --color: #f0f0f0;
}

Anda boleh gunakan 80% kelegapan padanya dengan:

#element {
  background-color: rgba(var(--color), 0.8);
}

Hasil ini dalam:

<p></p>

di mana warna latar belakang elemen mempunyai 80% kelegapan sambil mengekalkan imej latar belakang.

Nota Pelaksanaan:

Ini kaedah disokong oleh semua pelayar utama. Walau bagaimanapun, perlu diingat bahawa ia menukar nilai heks kepada RGB perpuluhan, yang mungkin menjejaskan ketepatan perwakilan warna dalam beberapa situasi.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Kelegapan pada Pembolehubah Warna CSS Semasa Memelihara Imej Latar Belakang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!