Bagaimana Saya Boleh Terbalikkan Warna Fon CSS Berdasarkan Warna Latar Belakang?

Terbalikkan Warna Fon CSS Berdasarkan Warna Latar Belakang

Dalam CSS, tiada sifat langsung yang membolehkan anda menyongsangkan warna fon berdasarkan warna latar belakang. Walau bagaimanapun, terdapat pelbagai teknik yang boleh anda gunakan untuk mencapai kesan ini.

Menggunakan Elemen Pseudo

Unsur Pseudo boleh digunakan untuk membuat pembalut di sekeliling teks, yang anda kemudian boleh menggayakan secara bebas. Contohnya:

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

Menggunakan Dua DIV

Untuk penyemak imbas lama yang tidak menyokong elemen pseudo, anda boleh menggunakan dua DIV sebaliknya:

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

.inverted-bar {
    position: relative;
    padding: 10px;
    text-indent: 10px;
}

.inverted-bar:before {
    content: attr(data-content);
    background-color: aqua;
    color: red;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px 0;
    width: 100%;
}

.inverted-bar > div {
    content: attr(data-content);
    background-color: red;
    color: aqua;
    position: absolute;
    padding: 10px 0;
    top: 0;
    left: 0;
    width: 20%;
}

Nota: Pelaksanaan yang tepat mungkin berbeza bergantung pada keperluan khusus anda dan sokongan penyemak imbas.

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