使用CSS调整图片透明度主要有四种方法：1. 使用opacity属性可直接设置图片透明度，取值0到1，但会影响所有子元素；2. 通过background-image结合伪元素与opacity，可实现背景图透明而文字内容保持不透明；3. 利用filter: opacity(%)实现透明效果，适合动画和交互状态；4. 注意不同方法的兼容性，现代浏览器支持良好，老版本IE需特殊处理。
调整HTML图片的透明度主要通过CSS来实现，最常用的方法是使用opacity属性或rgba()颜色值配合伪元素。下面介绍几种实用且兼容性良好的方法。
1. 使用 opacity 属性
这是最简单直接的方式。通过设置opacity属性，可以控制整个图片的透明度。取值范围是0（完全透明）到1（完全不透明）。
例如：
p style="opacity: 0.5;">img src="example.jpg" alt="示例图片" />
/p>
也可以单独给图片设置：
立即学习“前端免费学习笔记（深入）”；
img style="opacity: 0.7;" src="example.jpg" alt="半透明图片" />注意：使用opacity会影响图片及其所有子元素（如文字覆盖），并且会继承给后代元素。
2. 使用 background-image 配合 rgba 和伪元素
如果希望更精细地控制背景图透明度，同时保持上面的文字或内容不透明，推荐使用background-image结合伪元素和rgba背景色。
示例代码：
div class="img-container">这是一段文字</div>
div.img-container <br> position: relative;
width: 300px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
::before <br> content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background-image: url('example.jpg');
opacity: 0.5;
z-index: -1;
<br> <br>
这样背景图变透明，但文字依然清晰可见。
3. 使用 CSS filter 调整透明效果
CSS filter属性中的opacity()函数也能实现类似效果，语法略有不同，单位是百分比。
示例：
img style="filter: opacity(60%);" src="example.jpg" />提示：这个方法常用于动态效果或hover状态：
img:hover <br> filter: opacity(30%);<br>
4. 兼容性和注意事项
这些方法在现代浏览器中都支持良好，但需注意以下几点：
-
opacity影响整个元素，包括文字、边框等 - 若只需背景图透明，优先用
background-image + ::before方案 -
filter: opacity()更适合动画和交互效果 - 老版本IE可能需要额外前缀或降级处理
基本上就这些常见用法，根据实际布局选择最合适的方式即可。
