如何根據背景顏色反轉 CSS 字體顏色？

根據背景顏色反轉 CSS 字體顏色

實現根據背景顏色反轉字體顏色是常見的設計需求。本問題探討如何使用 CSS 來實現此目的。

解決方案：Mix-Blend-Mode（有限支援）

mix-blend-mode CSS 屬性允許顏色混合基於底層背景顏色。不過，Internet Explorer 不支援此屬性。

解決方案：偽元素（建議）

跨瀏覽器相容性的建議方法是使用偽元素 ( ：之前和：之後）。透過在文字上放置一個彩色偽元素並將其文字顏色設定為所需的反色值，就可以創建所需的效果。

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

解決方案：兩個DIV（IE6 和IE7 支援）

為了獲得額外的跨瀏覽器支持，尤其是IE6 和IE7，您可以使用兩個DIV 元素而不是偽元素。這涉及將第二個 DIV 絕對定位在第一個 DIV 上，並設定其 z-index、不透明度和背景顏色以實現所需的效果。

以上是如何根據背景顏色反轉 CSS 字體顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！