本文目錄導讀：

1. 使用濾鏡（Filter）
2. 使用遮罩（Mask）

CSS技巧：調整背景圖片的色調

在網頁設計中，背景圖片是增強頁面視覺效果的重要元素，有時，我們可能想要改變背景圖片的色調，以增強頁面的主題或氛圍，雖然直接通過CSS改變背景圖片的色調可能有些復雜，但我們可以通過一些間接的方法實現這一效果，本文將介紹幾種方法，幫助你調整背景圖片的色調。

使用濾鏡（Filter）

CSS的濾鏡功能可以幫助我們改變圖片的色調。filter: brightness() 和filter: saturate() 函數可以分別調整圖片的亮度和飽和度，從而達到改變色調的效果。

body {
  background-image: url('your-image-url');
  filter: brightness(50%) saturate(70%); /* 調整亮度和飽和度 */
}

使用遮罩（Mask）

我們可以使用CSS的遮罩功能，將一張半透明的顏色遮罩層放置在背景圖片上方，從而改變背景圖片的視覺效果。

body {
  background-image: url('your-image-url');
  position: relative; /* 使遮罩層定位在背景圖片上方 */
}
body::after {
  content: ""; /* 創(chuàng)建遮罩層 */
  position: absolute; /* 定位在背景圖片上方 */
  top: 0; /* 與頁面頂部對齊 */
  left: 0; /* 與頁面左邊對齊 */
  width: 100%; /* 覆蓋整個頁面寬度 */
  height: 100%; /* 覆蓋整個頁面高度 */
  background-color: rgba(0, 0, 0, 0.5); /* 設置遮罩顏色 */
}

三. 使用混合模式（Mix-blend mode）和偽元素（Pseudo-elements）結合使用，通過改變偽元素的背景顏色和混合模式，可以間接地改變背景圖片的色調。

三種方法都可以間接地改變背景圖片的色調，具體使用哪種方法取決于你的需求和設計目標，希望這些方法能夠幫助你提升網頁設計的視覺效果。