prefers-reduced-transparency

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

prefers-reduced-transparency CSS 媒體特性用於檢測使用者是否在其裝置上啟用了減少裝置上使用的透明或半透明圖層效果的設定。啟用此類設定有助於改善某些使用者的對比度和可讀性。

語法

各種作業系統都提供了減少透明度的偏好設定，使用者代理很可能會依賴這些系統設定。它們也可能依賴於沒有提供特定設定的平臺上的不那麼明確的訊號。

此示例預設有一個半透明框。如果您的裝置上的輔助功能偏好設定中啟用了減少透明度的設定，則半透明框會變得更不透明。

html

<div class="translucent">translucent box</div>

css

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

規範
媒體查詢 Level 5 # prefers-reduced-transparency

此頁面最後由 MDN 貢獻者於 2025 年 10 月 14 日修改。