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

Menyongsangkan Warna Fon Berdasarkan Warna Latar Belakang

Dalam CSS, anda mungkin menghadapi senario di mana anda ingin menyongsangkan warna fon bergantung pada warna latar belakang, mencapai kesan yang serupa dengan imej di bawah:

[Imej dengan teks putih dan hitam berselang-seli pada latar belakang berwarna panels]

Penyelesaian CSS:

Walaupun sifat CSS langsung untuk menyongsangkan warna fon berdasarkan warna latar belakang tidak wujud, anda boleh mencapainya menggunakan elemen pseudo. Selain itu, untuk keserasian dengan penyemak imbas lama seperti IE6 dan IE7, anda boleh menggunakan dua DIV dan bukannya elemen pseudo.

Sifat Mod Campuran Campuran:

CSS mempunyai harta yang dipanggil mix-blend-mode, tetapi ia tidak disokong oleh Internet Explorer. Sifat ini membolehkan anda menggabungkan warna latar depan (warna fon) dan latar belakang untuk mencipta pelbagai kesan. Walau bagaimanapun, seperti yang dinyatakan, sokongan penyemak imbasnya yang terhad menjadikannya kurang praktikal untuk senario ini.

Pendekatan Elemen Pseudo:

Untuk mencipta kesan warna berselang-seli menggunakan elemen pseudo, masukkan elemen pseudo :sebelum dan :selepas pada elemen induk dengan kedudukan relatif. Tetapkan kandungan elemen pseudo ini kepada teks yang diingini dan laraskan warna latar belakangnya. Dengan mengawal lebar elemen pseudo :selepas, anda boleh mencapai kesan penyongsangan.

Kod Contoh:

.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%;
}

html {
    font-size: 16px;
}

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

Pendekatan ini membolehkan anda untuk terbalikkan warna fon bergantung pada warna latar belakang, mewujudkan kesan visual yang menarik dalam reka bentuk web anda.

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