在 html 中調整圖片透明度主要通過 css 實現。第一種方法是使用 opacity 屬性，接受 0 到 1 的數值，例如 opacity: 0.7 表示 70% 不透明；第二種方法適用于背景圖，通過 rgba 或 hsla 設置帶透明度的背景色實現視覺效果；第三種方法使用 Filter 屬性結合 opacity(60%) 調整透明度，但兼容性略差；此外還可結合 hover 偽類實現動態透明度過渡效果，如默認 opacity: 0.6 并在懸停時變為不透明。選擇方式需根據具體需求和場景決定。
在 HTML 中調整圖片的透明度，主要依靠的是 css 的 opacity 屬性。HTML 本身只是用來引入圖片，而具體的樣式控制需要借助 CSS 來完成。
下面介紹幾種常見的設置圖片透明度的方法和使用場景。
使用 opacity 屬性調整整體透明度
最簡單直接的方式是通過 CSS 的 opacity 屬性來設置圖片的透明度。這個屬性接受一個 0 到 1 之間的數值：
立即學習“前端免費學習筆記（深入）”；
- opacity: 1; 表示完全不透明
- opacity: 0.5; 表示半透明
- opacity: 0; 表示完全透明
例如：
@@##@@
這樣就可以讓這張圖片顯示為 70% 不透明、30% 透明的效果。適用于希望整個圖片都變透明的情況。
注意：opacity 會影響圖片及其所有子元素（比如疊加的文字或圖標）的整體透明度。
用 rgba 或 hsla 設置背景圖的透明度
如果你是把圖片作為某個元素的背景圖，并且只想調整背景圖的透明度而不影響前景內容，可以考慮使用帶有透明度的顏色值，比如 rgba() 或 hsla()。
例如：
.box { width: 300px; height: 200px; background: url('example.jpg') no-repeat center; background-size: cover; background-color: rgba(255, 255, 255, 0.5); /* 白色半透明覆蓋層 */ }
在這個例子中，圖片本身沒有被設置透明度，而是通過疊加一層帶透明度的顏色來實現視覺上的“調透明”效果。
使用 CSS 濾鏡 filter 調整透明度
CSS 的 filter 屬性也可以用于調整圖片的透明度，雖然它主要用于濾鏡效果（如模糊、灰度等），但結合 opacity 可以達到類似效果。
@@##@@
這里使用的單位是百分比，而不是小數，這和 opacity 屬性略有不同。不過要注意，filter 屬性在某些瀏覽器中的兼容性可能不如 opacity 好。
小技巧：hover 時改變透明度做交互效果
很多網站會在鼠標懸停（hover）時動態改變圖片透明度，做出過渡動畫效果，提升用戶體驗。
例如：
<style> .fade-img { opacity: 0.6; transition: opacity 0.3s ease; } .fade-img:hover { opacity: 1; } </style> @@##@@
這樣圖片默認是半透明狀態，當鼠標移上去時會逐漸變為不透明。
基本上就這些方法了。你可以根據實際需求選擇使用哪種方式。如果是單純調整圖片本身的透明度，優先推薦使用 opacity；如果想更靈活控制背景或其他視覺效果，可以搭配 rgba 或 filter 來實現。
