Penjelasan detail tentang atribut mix-blend-mode di CSS (mengatur blend mode suatu elemen)

Daftar isi

1. Pengenalan atribut mode campuran-campuran 2. Nilai atribut umum dari mode campuran-campuran 3. Aplikasi atribut mode campuran-campuran 1. Efek aplikasi 2. Kode terkait 4. Latar belakang adaptasi cerdas teks 1. Gaya asli 2. Tambahkan Campuran 3. Kode implementasi

1. Pengenalan atribut mix-blend-mode

[ Atribut mode campuran-campuran ] di CSS menjelaskan bagaimana konten suatu elemen harus dicampur dengan konten elemen induk langsung dari elemen tersebut dan latar belakang elemen ;

Digunakan untuk mengatur mode campuran antara latar belakang dan latar depan suatu elemen; dapat diterapkan ke elemen apa pun; dapat digunakan dengan atribut gambar latar untuk membuat berbagai efek visual yang berbeda;

2. Nilai atribut umum dari mode campuran-campuran

normal : atribut ini tidak menerapkan pencampuran apa pun.multiply : elemen dikalikan dengan latar belakang dan menggantikan warna latar belakang. Warna yang dihasilkan selalu sama gelapnya dengan latar belakang.screen : mengalikan latar belakang dan konten kemudian melengkapi hasilnya menghasilkan konten yang lebih terang daripada warna latar belakang.overlay : mengalikan atau menyaring konten tergantung pada warna latar belakang. Ini adalah kebalikan dari mode campuran hard-light.darken : latar belakang diganti dengan konten di mana konten tersebut berada lebih gelap, jika tidak, biarkan seperti semula.lighten : latar belakang diganti dengan konten yang kontennya lebih terang.color-dodge : atribut ini mencerahkan warna latar belakang untuk mencerminkan warna konten.color-burn : ini menggelapkan latar belakang untuk mencerminkan warna alami konten.hard-light : bergantung pada warna konten, atribut ini akan menyaring atau memperbanyaknya.soft-light : bergantung pada warna konten, atribut ini akan menggelapkan atau mencerahkannya.difference : ini mengurangi yang lebih gelap dari keduanya warna dari warna yang paling terang.exclusion : mirip dengan perbedaan tetapi dengan kontras yang lebih rendah.hue : menciptakan warna dengan corak konten yang dikombinasikan dengan saturasi dan luminositas latar belakang.saturation : menciptakan warna dengan saturasi konten yang dipadukan dengan rona dan luminositas latar belakang.color : menciptakan warna dengan rona dan saturasi konten serta luminositas latar belakang.luminositas : menciptakan warna dengan luminositas konten dan rona dan saturasi latar belakang. Ini adalah kebalikan dari atribut warna.

3. Aplikasi atribut mode campuran-campuran

1. Efek aplikasi

Klik tampilan efek

Penerapan atribut mode campuran-campuran

2. Kode terkait

 <!DOCTYPEhtml>
<htmllang="id">
<kepala>
<meta charset="UTF-8">
<meta name="viewport" content="width=lebar perangkat, skala awal=1.0">
<title>Penerapan atribut mode campuran-campuran</title>
<gaya>
* {
margin: 0;
bantalan: 0;
}
.wadah {
/* Mendefinisikan variabel */
--mode campuran-campuran: normal;
posisi: relatif;
lebar: 300 piksel;
tinggi: 400 piksel;
margin: 60 piksel;
bantalan: 20 piksel;
bayangan kotak: 0 0 6px 1px #999;
radius batas: 6px;
warna sisipan: transparan;
}
jam3,
jam4 {
margin-bawah: 10 piksel;
}
.kotak-info {
lebar: 100%;
tinggi: 24 piksel;
tinggi garis: 24 piksel;
}
.lingkaran {
posisi: mutlak;
lebar: 200 piksel;
tinggi: 200 piksel;
radius perbatasan: 50%;
mode campuran-campuran: var(--mode-campuran-campuran);
}
.kotak merah {
kiri: 70 piksel;
atas: 160 piksel;
warna latar: merah;
}
.kotak hijau {
kiri: 30 piksel;
atas: 220 piksel;
warna latar belakang: hijau muda;
}
.kotak biru {
kiri: 110 piksel;
atas: 220 piksel;
warna latar belakang: biru;
}
</gaya>
</kepala>
<tubuh>
<div kelas="wadah">
<h3>Penerapan atribut mode campuran-campuran</h3>
<h4 class="kotak-nilai"></h4>
<div kelas="kotak info"></div>
<div class="lingkaran kotak merah"></div>
<div class="lingkaran kotak hijau"></div>
<div class="lingkaran kotak biru"></div>
</div>
</tubuh>
<skrip>
// Dapatkan elemen var container = document.querySelector(".container");
var valueBox = dokumen.querySelector(".value-box");
var infoBox = dokumen.querySelector(".info-box");
//Daftar nilai dan deskripsi atribut mode campuran-campuran;
nilai var = [
{
nomor identitas: 1,
nama: "biasa",
nilai: "normal",
info: "Properti ini tidak menerapkan pencampuran apa pun;"
},
{
nomor identitas: 2,
nama: "kalikan",
nilai: "kalikan",
info: "Elemen dikalikan dengan latar belakang dan menggantikan warna latar belakang. Warna yang dihasilkan selalu segelap latar belakang;"
},
{
nomor identitas: 3,
nama: "hamparan",
nilai: "hamparan",
info: "Perbanyak atau sembunyikan konten berdasarkan warna latar belakang; ini kebalikan dari mode pencampuran cahaya keras;"
},
{
tanda pengenal: 4,
nama: "layar",
nilai: "layar",
info: "Perbanyak latar belakang dan konten lalu tambahkan hasilnya. Ini akan menghasilkan konten menjadi lebih terang daripada warna latar belakang;"
},
{
nomor identitas: 5,
nama: "Gelap",
nilai: "menggelapkan",
info: "Ketika konten digelapkan, latar belakang akan diganti dengan konten, jika tidak maka akan tetap apa adanya;"
},
{
nomor identitas: 6,
nama: "mencerahkan",
nilai: "meringankan",
info: "Latar belakang diganti dengan konten yang lebih terang;"
},
{
nomor identitas: 7,
nama: "Warna memudar",
nilai: "penghindaran warna",
info: "Properti ini mencerahkan warna latar belakang untuk mencerminkan warna konten;"
},
{
nomor identitas: 8,
nama: "Warna memudar",
nilai: "warna terbakar",
info: "Ini menggelapkan latar belakang untuk mencerminkan warna alami konten;"
},
{
nomor identitas: 9,
nama: "cahaya keras",
nilai: "keras-ringan",
info: "Properti ini akan memfilter atau memperbanyak konten berdasarkan warnanya."
},
{
nomor identitas: 10,
nama: "cahaya lembut",
nilai: "cahaya lembut",
info: "Tergantung pada warna konten, ini akan menggelapkan atau mencerahkannya;"
},
{
nomor identitas: 11,
nama: "Perbedaan",
nilai: "perbedaan",
info: "Ini akan mengurangi warna paling gelap dari dua warna paling terang;"
}, {
nomor identitas: 12,
nama: "kecualikan",
nilai: "pengecualian",
info: "Mirip perbedaannya, tetapi dengan kontras lebih rendah;"
},
{
nomor identitas: 13,
nama: "Warna",
nilai: "rona",
info: "Buat warna dengan menggabungkan rona konten dengan saturasi dan kecerahan latar belakang;"
},
{
nomor identitas: 14,
nama: "saturasi",
nilai: "saturasi",
info: "Menciptakan warna dari saturasi konten dan rona serta kecerahan latar belakang;"
},
{
nomor identitas: 15,
nama: "Campuran Warna",
nilai: "warna",
info: "Membuat warna berdasarkan rona dan saturasi konten serta kecerahan latar belakang;"
},
{
nomor identitas: 16,
nama: "kecerahan",
nilai: "luminositas",
info: "Menciptakan warna berdasarkan luminositas konten dan rona serta saturasi latar belakang. Ini adalah kebalikan dari properti warna;"
}
]
ubahMode();
//Ubah mode campuran-campuran
fungsi perubahanMode() {
biarkan indeks = 0;
modAttr(indeks);
biarkan timerId = setInterval(() => {
if (indeks >= nilai.panjang) {
clearInterval(timerId);
kembali;
}
indeks++;
modAttr(indeks)
}, 3000)
}
fungsi modAttr(indeks) {
//Tetapkan nilai properti dari mode campuran-campuran container.style.setProperty('--mix-blend-mode', value[index].value);
valueBox.innerHTML = `mode campuran-campuran : ${values[index].value};`;
infoBox.innerHTML = `${values[index].name}(${values[index].value}): ${values[index].info}`
}
</skrip>
</html>

4. Teks secara cerdas beradaptasi dengan latar belakang

Seringkali, teks perlu ditampilkan di sebelah gambar. Jika warna teks dan gambar mirip, keterbacaan akan sangat terpengaruh;

Bagaimana cara membuat teks secara otomatis beradaptasi dengan latar belakang?

Anda dapat menggunakan atribut mix-blend-mode untuk mengatur campuran warna teks dan latar belakang untuk mencapai efek penyesuaian teks dengan latar belakang;

1. Gaya asli

Warna teks putih; keterbacaan buruk pada beberapa gambar;

 .item-grid > h3 {
warna: rgb(255, 255, 255);
...
}

2. Tambahkan ke dalam adonan

Atur atribut mode campuran-campuran ke perbedaan ;

Nilai awal warna teks adalah putih, namun selisihnya akan dihitung dengan nilai warna setiap piksel yang sesuai dengan latar belakang elemen induk untuk memperoleh nilai warna baru;

Nilai warna teks - nilai warna latar belakang = nilai piksel campuran;

Misalnya: warna teks (255, 255, 255), warna latar belakang (255, 255, 255), nilai terhitung (0, 0, 0), ditampilkan dalam warna hitam;

 .item-grid>h3 {
warna: rgb(255, 255, 255);
/* Atur blending mode -- hitung selisihnya */
mode campuran-campuran: perbedaan;
...
}

Catatan: Perbedaan blending mode di sini diterapkan pada teks;

3. Menerapkan kode tersebut

 <!DOCTYPEhtml>
<htmllang="id">
<kepala>
<meta charset="UTF-8">
<meta name="viewport" content="width=lebar perangkat, skala awal=1.0">
<title>Teks secara cerdas beradaptasi dengan latar belakang</title>
<gaya>
* {
margin: 0;
bantalan: 0;
}
.wadah {
tampilan: fleksibel;
lebar: 100vw;
tinggi: 60vh;
justify-content: tengah;
menyelaraskan-item: tengah;
}
.grid-container {
tampilan: kisi;
kolom-templat-kisi: 400px 400px 400px;
baris-templat-kisi: 200px 200px;
celah: 10 piksel;
}
.item-grid {
pengulangan latar belakang: tidak ada pengulangan;
ukuran latar belakang: sampul;
radius batas: 6px;
bayangan kotak: 0 0 6px 1px #999;
}
.item-grid>h3 {
warna: rgb(255, 255, 255);
ukuran font: 36 piksel;
/* Atur blending mode -- hitung selisihnya */
mode campuran-campuran: perbedaan;
}
.item-grid:anak-n(1) {
/* gambar latar: url("D:\test\zyl-img\bg_1.jpg" */
warna latar: merah
}
.item-grid:anak-n(2) {
/* gambar latar: url("D:\test\zyl-img\bg_2.jpg" */
warna latar belakang: ungu;
}
.item-grid:anak-n(3) {
/* gambar latar: url("D:\test\zyl-img\bg_3.jpg" */
warna latar: kuning;
}
.item-grid:anak-n(4) {
/* gambar latar: url("D:\test\zyl-img\bg_4.jpg" */
warna latar belakang: hijau;
}
.item-grid:anak-n(5) {
/* gambar latar: url("D:\test\zyl-img\bg_5.jpg" */
warna latar belakang: teal;
}
.item-grid:anak-n(6) {
/* gambar latar: url("D:\test\zyl-img\bg_6.jpg" */
warna latar belakang: biru;
}
</gaya>
</kepala>
<tubuh>
<div kelas="wadah">
<div class="wadah-grid">
<div class="item-grid">
<h3>Penerapan atribut mode campuran-campuran</h3>
</div>
<div class="item-grid">
<h3>Penerapan atribut mode campuran-campuran</h3>
</div>
<div class="item-grid">
<h3>Penerapan atribut mode campuran-campuran</h3>
</div>
<div class="item-grid">
<h3>Penerapan atribut mode campuran-campuran</h3>
</div>
<div class="item-grid">
<h3>Penerapan atribut mode campuran-campuran</h3>
</div>
<div class="item-grid">
<h3>Penerapan atribut mode campuran-campuran</h3>
</div>
</div>
</div>
</tubuh>
</html>

Demikianlah artikel kali ini mengenai penjelasan detail atribut mix-blend-mode di CSS (mengatur mode campuran suatu elemen). Untuk informasi lebih lanjut tentang atribut mix-blend-mode css, silakan cari di artikel sebelumnya di downcodes.com atau Lanjutkan menelusuri artikel relevan di bawah ini, dan saya harap Anda akan mendukung downcodes.com di masa mendatang!