Rumah > hujung hadapan web > tutorial css > Mengapa Kotak Separa Lutsinar Bertindan Menunjukkan Warna Berbeza Bergantung pada Pesanannya?

Mengapa Kotak Separa Lutsinar Bertindan Menunjukkan Warna Berbeza Bergantung pada Pesanannya?

Susan Sarandon
Lepaskan: 2024-12-09 22:06:19
asal
622 orang telah melayarinya

Why Do Stacked Semi-Transparent Boxes Show Different Colors Depending on Their Order?

Kotak Separa Lutsinar Bertindan Mempamerkan Variasi Warna Bergantung Tertib

Apabila menyusun dua kotak separa lutsinar, warna akhir yang diperhatikan berbeza berdasarkan susunan susunan. Fenomena ini berlaku disebabkan oleh gabungan warna yang berbeza-beza dalam setiap kes.

Penjelasan Perbezaan Warna

Dalam kes pertama, kotak atas (dengan 50% kelegapan) mengandungi warna biru dan membolehkan kotak bawah menyumbang 50% warna merah. Oleh itu, warna keseluruhan adalah gabungan 50% biru dan 25% merah (kerana baki 50% merah dikaburkan oleh biru).

Namun, dalam kes kedua, kotak diterbalikkan. Kini, kotak atas mempunyai 50% kelegapan untuk merah dan membenarkan kotak bawah menyumbang 50% warna biru. Kesan keseluruhan adalah gabungan yang berbeza: 50% merah dan 25% biru. Oleh kerana perkadaran tidak sama, warna kelihatan berbeza.

Mencapai Ketekalan Warna

Untuk mendapatkan warna yang sama tanpa mengira susunan kotak, perkadaran warna dalam setiap lapisan mestilah sama. Dalam erti kata lain, lapisan atas harus membenarkan bahagian yang sama warna lapisan bawah melaluinya.

Sebagai contoh, pertimbangkan persediaan berikut:

  • Lapisan atas: 25% kelegapan (0.25) biru
  • Lapisan bawah: 33.3% kelegapan (0.333) merah

Dalam senario ini, kedua-dua lapisan membenarkan 25% daripada warna lain ditunjukkan. Oleh itu, tanpa mengira susunan, warna yang terhasil adalah sama (campuran 25% biru dan 75% lutsinar).

Atas ialah kandungan terperinci Mengapa Kotak Separa Lutsinar Bertindan Menunjukkan Warna Berbeza Bergantung pada Pesanannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan