Gunakan mod campuran CSS dengan bijak untuk menyesuaikan teks dengan warna latar belakang dengan bijak

<p>

<p>Ada teks pada halaman bolehkah teks ini dipaparkan dalam warna yang berbeza di bawah warna latar belakang yang berbeza? Ia juga dikenali sebagai perubahan warna pintar. Seperti ini:

<p>

<p>Teks kelihatan putih pada latar belakang hitam dan hitam pada latar belakang putih. Nampaknya kesan yang sangat rumit, tetapi ia sebenarnya sangat mudah untuk dilaksanakan dalam CSS Hari ini saya akan memperkenalkan sedikit helah Dalam CSS, gunakan mod campuran mix-blend-mode: difference untuk menyesuaikan teks dengan warna latar belakang. [Pembelajaran yang disyorkan: tutorial video css]

mod campuran-campuran: perbezaan

<p>CSS3 telah menambah atribut yang sangat menarik -- campuran- mod campuran, di mana terjemahan bebas bahasa Cina bagi campuran dan campuran kedua-duanya adalah campuran, maka terjemahan literal atribut ini ialah mod campuran campuran Sudah tentu, kami biasanya memanggilnya mod campuran. Terdapat beberapa mod percampuran seperti yang ditunjukkan dalam rajah di bawah:

<p>

<p> Antaranya, protagonis artikel ini ialah mix-blend-mode: difference, yang bermaksud mod perbezaan. Mod campuran ini melihat maklumat warna dalam setiap saluran, membandingkan warna asas dengan warna lukisan dan menolak nilai piksel piksel gelap daripada nilai piksel piksel lebih terang.

<p>Campuran dengan putih akan menyongsangkan warna latar belakang;

<p>Ringkasnya, kawasan terang lapisan atas membalikkan warna lapisan bawah, dan kawasan gelap memaparkan warna secara normal Kesannya adalah warna yang sama sekali bertentangan dengan warna asal imej.

<p>Senario aplikasi yang paling biasa bagi mod campuran ini ialah senario yang diterangkan pada permulaan artikel, yang membolehkan teks memaparkan warna yang berbeza pada warna latar belakang yang berbeza.

<p> Paling sesuai untuk adegan hitam putih, DEMO yang sangat mudah:

<div></div>

div {
    height: 100vh;
    background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);

    &::before {
        content: "LOREM IPSUM";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        mix-blend-mode: difference;
        animation: move 3s infinite linear alternate;
    }
}
@keyframes move {
    0% {
        transform: translate(-30%, -50%);
    }
    100% {
        transform: translate(-70%, -50%);
    }
}

<p>Kesannya adalah seperti berikut:

<p>

<p> Demo Codepen-Linear-Gradient Mix-Blend-Mode

<p> tentu saja, ia tidak perlu hitam atau putih. contoh di bawah. Terdapat senario sedemikian Kadang-kadang kami tidak pasti tentang nilai prestasi akhir warna latar belakang (ia mungkin konfigurasi latar belakang dan dihantar ke bahagian hadapan), tetapi kami memerlukan teks untuk dipaparkan secara normal di bawah mana-mana latar belakang. warna. Pada masa ini, anda juga boleh cuba menggunakan mix-blend-mode: difference.

<ul class="flex-box">
  <div class="box">
    <p>开通会员查看我的VIP等级</p>
  </div>
   // ..... 
</ul>

div {
    // 不确定的背景色
}
p {
    color: #fff;
    mix-blend-mode: difference;
}

<p>Tidak kira apa warna latar belakang, elemen mix-blend-mode: difference dengan set <p> boleh memaparkan teks seperti biasa:

<p>

<p>Demo CodePen -- mix-blend-mode:difference melaksanakan latar belakang penyesuaian warna teks

Kelemahan mix-blend-mode:difference

<p>Apabila digunakan di sini, dalam adegan bukan hitam putih, lebih banyak percubaan diperlukan untuk membuat pilihan. mix-blend-mode:difference

<p>Akhir sekali

Untuk meringkaskan, artikel ini memperkenalkan sedikit helah untuk menggunakan mod adunan CSS untuk merealisasikan paparan latar belakang penyesuaian teks Jika anda berminat dengan mod adunan, saya syorkan anda Lihat artikel saya berikut:

<p>

Mod campuran campuran-campuran-mod yang luar biasa

• Mod latar belakang-campuran-mod pengadunan yang luar biasa
• Dua baris kod CSS untuk melaksanakan sebarang teknologi pewarnaan warna untuk imej
• Gunakan CSS dengan bijak untuk membina kod QR warna kecerunan
• Helah CSS | Gunakan mod campuran untuk mencapai kesan gelombang berongga teks
• Terokai masalah kegagalan CSS 3D yang disebabkan oleh penapis mod campuran CSS
• Seni CSS - Gunakan latar belakang untuk mencipta pelbagai latar belakang yang menarik
• Baiklah, artikel ini berakhir di sini, saya harap ia membantu anda

<p> Alamat asal: https://www.cnblogs.com/coco1s/p/16012545.html

Pengarang: ChokCoco<p>

<p>(Belajar perkongsian video: bahagian hadapan web)

Atas ialah kandungan terperinci Gunakan mod campuran CSS dengan bijak untuk menyesuaikan teks dengan warna latar belakang dengan bijak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!