在 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;表示完全透明
例如：
<img src="example.jpg" style="opacity: 0.7;">
这样就可以让这张图片显示为 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 可以达到类似效果。
<img src="example.jpg" style="filter: opacity(60%);">
这里使用的单位是百分比，而不是小数，这和 opacity 属性略有不同。不过要注意，filter 属性在某些浏览器中的兼容性可能不如 opacity 好。
小技巧：hover 时改变透明度做交互效果
很多网站会在鼠标悬停（hover）时动态改变图片透明度，做出过渡动画效果，提升用户体验。
例如：
<style>
.fade-img {
opacity: 0.6;
transition: opacity 0.3s ease;
}
.fade-img:hover {
opacity: 1;
}
</style>
<img src="example.jpg" class="fade-img">这样图片默认是半透明状态，当鼠标移上去时会逐渐变为不透明。
基本上就这些方法了。你可以根据实际需求选择使用哪种方式。如果是单纯调整图片本身的透明度，优先推荐使用 opacity；如果想更灵活控制背景或其他视觉效果，可以搭配 rgba 或 filter 来实现。
