Bagaimana untuk Menyongsangkan Warna Fon CSS Berdasarkan Warna Latar Belakang?

Terbalikkan Warna Fon CSS Berdasarkan Warna Latar Belakang

Mencapai penyongsangan warna fon berdasarkan warna latar belakang ialah keperluan reka bentuk biasa. Soalan ini meneroka cara untuk mencapai ini menggunakan CSS.

Penyelesaian: Mix-Blend-Mod (Sokongan Terhad)

Sifat CSS campuran-campuran-mod membenarkan pencampuran warna berdasarkan warna latar belakang asas. Walau bagaimanapun, sifat ini tidak disokong dalam Internet Explorer.

Penyelesaian: Elemen Pseudo (Disyorkan)

Pendekatan yang disyorkan untuk keserasian merentas penyemak imbas adalah menggunakan elemen pseudo ( :sebelum dan :selepas). Dengan meletakkan elemen pseudo berwarna di atas teks dan menetapkan warna teksnya kepada nilai songsang yang diingini, anda boleh mencipta kesan yang diingini.

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

Penyelesaian: Dua DIV (Sokongan IE6 dan IE7)

Untuk sokongan silang pelayar tambahan, terutamanya untuk IE6 dan IE7, anda boleh menggunakan dua elemen DIV dan bukannya unsur pseudo. Ini melibatkan meletakkan DIV kedua secara mutlak di atas yang pertama dan menetapkan indeks-z, kelegapan dan warna latar belakangnya untuk mencapai kesan yang diingini.

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