opacity仅控制整个元素及其子内容的透明度，无法单独调节图片；正确做法是用::before伪元素实现背景图透明或css多层背景叠加。
opacity 是最直接、最可靠的图片透明度控制方式，但它不是“调图片”，而是“调整个元素及其所有子内容”。如果你只想让图片变透、文字或按钮保持清晰，opacity 就会出错——得换思路。
用 opacity 设置 <img> 透明度时的典型错误
常见现象是：图片设了 opacity: 0.4，结果发现父容器里的文字、图标、边框也一起发灰变淡；或者加了 transition 却没反应，其实是忘了加 display: block 或触发了层叠上下文导致过渡失效。
关键点：
-
opacity值必须是 0～1 的小数，写成opacity: 40%或opacity: 40都无效，浏览器直接忽略 - 它会创建新的层叠上下文（stacking context），可能影响
z-index行为，尤其在模态框、下拉菜单中容易遮挡内容 - 不继承：子元素不会自动继承父级的
opacity，但会叠加——比如父设opacity: 0.5，子再设opacity: 0.6，最终是0.5 × 0.6 = 0.3 - IE8 及更早需补
filter: alpha(opacity=40)，但现代项目基本可省略
背景图怎么单独调透明度而不影响文字
直接给容器设 opacity 行不通——文字也会变透。正确做法是把背景抽成独立图层。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
推荐用 ::before 伪元素：
div.hero {
position: relative;
}
div.hero::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: url("bg.jpg");
background-size: cover;
opacity: 0.3;
z-index: -1;
}
注意三点：
- 必须写
content: ""，否则伪元素不渲染 -
z-index: -1确保它垫在内容底下，不影响点击和 focus 流 - 如果页面可滚动，且希望背景固定，加
background-attachment: fixed
想只透背景、保留前景清晰？别碰 opacity
当你要的是「图片作为背景 + 上面盖一层半透色 + 文字完全不透明」，opacity 不适用。此时应放弃“调图”，改用视觉合成：
- 用
background多层叠加：background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(...) - 或用
background-blend-mode: overlay混合图层，对 PNG/JPEG 更友好 - 若背景图来自
<img>标签（非 CSS background），只能包裹一层带rgba()背景色的<div>，再用 <code>position: absolute叠文字真正容易被忽略的点：透明度不是视觉效果的终点，而是层级关系的开关。
opacity一加，层叠上下文就立，z-index 规则重算，hover/focus/pointer-events 都可能意外失效——调试时先查 computed styles 里的transform、will-change、opacity是否无意中触发了新 stacking context。
