Bagaimanakah Saya Boleh Melaraskan Warna Fon Secara Dinamik Berdasarkan Warna Latar Belakang dalam CSS?

Mencipta Warna Fon Dinamik Berdasarkan Warna Latar Belakang

Menggunakan CSS, anda boleh melaraskan warna fon berdasarkan warna latar belakang secara automatik, meniru kesan yang ditunjukkan dalam imej yang disediakan.

Untuk mencapai ini, kami akan menggunakan sifat dan teknik CSS yang disokong secara meluas merentasi penyemak imbas moden:

Sifat Campuran-Mod:

Walaupun sifat mod campuran-campuran membenarkan untuk menggabungkan warna secara dinamik, adalah penting untuk ambil perhatian bahawa ia tidak disokong oleh Internet Explorer (IE).

Elemen dan Kelas Pseudo Nama:

Sebaliknya, kami akan memanfaatkan elemen pseudo dan nama kelas untuk mencipta kesan yang diingini. Dengan meletakkan elemen anak terus di dalam elemen induk, kami boleh menggunakan peraturan CSS khusus untuk mencipta warna fon yang berbeza:

.inverted-bar {
    position: relative;
}

.inverted-bar:before,
.inverted-bar:after {
    padding: 10px 0;
    text-indent: 10px;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    content: attr(data-content);
}

.inverted-bar:before {
    background-color: aqua;
    color: red;
    width: 100%;
}

.inverted-bar:after {
    background-color: red;
    color: aqua;
    width: 20%;
}

Dalam coretan ini, kami menetapkan atribut kandungan data kepada elemen induk dan menggunakan CSS untuk memanipulasi teks dalam elemen anaknya. Elemen pseudo :before dan :after memastikan kesan kontras yang diingini.

Struktur HTML:

Untuk menggunakan teknik ini, struktur HTML harus menyerupai kod berikut:

<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>

Dengan menggabungkan sifat CSS ini dan pendekatan elemen pseudo, kami mencipta dinamik dengan berkesan warna fon yang menyesuaikan diri dengan warna latar belakang, menghasilkan komponen antara muka pengguna yang melaraskan secara automatik untuk kebolehbacaan yang lebih baik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaraskan Warna Fon Secara Dinamik Berdasarkan Warna Latar Belakang dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!