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

Persepsi Warna Kotak Separa Lutsinar Bertindan

Apabila dua kotak separa lut sinar disusun di atas satu sama lain, warna yang dilihat gabungan lapisan akan berbeza berdasarkan susunan ia disusun. Untuk memahami sebab di sebalik fenomena ini, mari kita mendalami konsep kelegapan dalam CSS.

Kelegapan mentakrifkan ketelusan elemen, antara 0 (lutsinar sepenuhnya) hingga 1 (legap sepenuhnya). Dalam contoh yang diberikan, CSS untuk kotak separa lut sinar mentakrifkan kelegapan sebagai 0.5, menunjukkan bahawa setiap lapisan mempunyai ketelusan 50%.

Apabila lapisan dengan latar belakang merah diletakkan di atas latar belakang biru , mata melihat gabungan 50% biru dari lapisan bawah dan 25% merah dari lapisan atas. Ini kerana ketelusan 50% lapisan atas membolehkan separuh daripada warna lapisan bawah kelihatan.

Walau bagaimanapun, apabila tertib diterbalikkan, dengan latar belakang biru di atas, mata bertemu dengan gabungan 50% merah dari lapisan bawah dan 25% biru dari lapisan atas. Peralihan dalam perkadaran ini menghasilkan warna persepsi yang berbeza.

Mencapai Warna Konsisten

Untuk memastikan warna persepsi yang sama tanpa mengira susunan kotak disusun, ia adalah perlu untuk mengekalkan perkadaran warna yang sama untuk kedua-dua lapisan. Dalam contoh yang disediakan, ini boleh dicapai dengan melaraskan nilai kelegapan seperti berikut:

Untuk lapisan dalam (mengandungi warna pepejal):

opacity: 0.25;

Untuk lapisan luar (mengandungi warna separa lutsinar):

opacity: 0.333;

Dengan pelarasan ini, kedua-dua lapisan akan mempunyai kekuatan warna 25% yang sama, menghasilkan warna persepsi yang sama tanpa mengira susunan ia disusun.

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