用 transform: scaleX(-1) 可实现背景图左右翻转，但会连带翻转内容；若仅翻背景，应使用伪元素方案：将 background-image 移至 ::before，对其应用 scaleX(-1)，并设 position: absolute、四方位定位及 z-index: -1。
用 CSS transform 实现背景图片左右翻转
HTML 元素本身没有「背景图翻转」属性，必须靠 transform: scaleX(-1) 对整个元素做镜像变换。这不是在操作 background-image 本身，而是让元素（连同其内容、边框、阴影等）视觉上左右颠倒——所以背景图也会随之翻转。
- 仅对块级或可变换元素生效（如
div、section），inline元素需先设display: inline-block或block - 翻转后，子元素文字、图标、表单控件也会被镜像，若只需翻背景而保留内容正常，得用伪元素隔离背景
-
transform不影响文档流，不会触发重排，但可能影响z-index层叠上下文
只翻背景图、不翻内容的正确写法（伪元素方案）
这是最稳妥的做法：把背景图抽到 ::before 伪元素上，单独对它做 scaleX(-1)，主元素保持原样。
.bg-flip {
position: relative;
width: 300px;
height: 200px;
}
.bg-flip::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url("pattern.png");
background-size: cover;
transform: scaleX(-1);
z-index: -1;
}
- 必须设
content: ""，否则伪元素不渲染 - 必须设
position: absolute+ 四方位定位（top/left/right/bottom），才能铺满父容器 -
z-index: -1确保伪元素在内容下方，否则会遮挡文字或按钮 - 若背景图有重复（
background-repeat），翻转后重复方向也反向，需留意视觉节奏是否突兀
用 background-image 配合 background-position 硬调？不行
有人试图通过负值 background-position 模拟翻转，比如设 background-position: 100% 50% 再配合 background-size 调整——这只能平移背景，无法真正镜像纹理或图案。对于非对称图（如带箭头、文字、人像的背景），位移完全不能替代翻转。
-
background-position是定位起点，不是变换工具 -
background-size: -100% auto是无效写法，CSS 不支持负尺寸 - 想用
image-rendering或滤镜辅助？filter: hue-rotate()或invert()改的是颜色，不是空间方向
兼容性与性能注意点
transform: scaleX(-1) 在所有现代浏览器（Chrome 12+、Firefox 3.5+、Safari 3.1+、Edge 12+）都支持，IE10+ 也支持。但若在大量元素上高频触发（如滚动中反复添加 class），可能引发重绘抖动。
立即学习“前端免费学习笔记（深入）”；
- 避免在
:hover中直接写transform动画，除非加will-change: transform提示合成层 - 移动端 Safari 对
transform伪元素的渲染偶有闪烁，可加backface-visibility: hidden缓解 - 如果背景图来自 SVG，且需精确控制翻转锚点（比如只翻某一部分），应改用 SVG 的
+transform="scale(-1,1)"，而非 CSS
z-index: -1 和 position: absolute 四方位定位——少一个，背景就显示不全或盖住内容。 
