CSS中无法直接旋转背景图，需用伪元素::before承载并旋转，配合absolute定位、z-index分层及宽高扩展防裁剪；或用repeating-linear-gradient模拟斜纹。
用 CSS transform: rotate() 倾斜背景图本身不生效
直接对 background-image 应用 rotate() 是无效的——CSS 背景图不响应 transform。真正能倾斜的是「承载背景的元素」，但这样会连同内容一起转，通常不是你想要的。
正确思路是：用伪元素（::before）单独承载背景图，并对其做旋转，再通过 z-index 和 position 控制层级，让内容正常显示在上方。
推荐做法：伪元素 + absolute 定位 + rotate()
这是最可控、兼容性好（IE11+）、不影响内容流的方式。关键点：
-
::before必须设content: ""才能渲染 - 父容器需设
position: relative，否则absolute会相对于 body 定位 - 旋转角度建议用
deg单位，负值向左倾，正值向右倾 - 为避免旋转后留白或裁剪，常配合
width: 200%和height: 200%扩展伪元素尺寸
.tilted-bg {
position: relative;
min-height: 400px;
}
.tilted-bg::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background-image: url("bg.jpg");
background-size: cover;
background-position: center;
transform: rotate(-5deg);
z-index: -1;
}
替代方案：用 linear-gradient 模拟斜纹背景
如果只是要「斜向纹理感」而非真实图片倾斜，linear-gradient 更轻量、无加载问题、可缩放无损。例如 45° 斜线：
立即学习“前端免费学习笔记（深入）”；
.stripe-bg {
background: repeating-linear-gradient(
-45deg,
#eee,
#eee 10px,
#ccc 10px,
#ccc 20px
);
}
注意：repeating-linear-gradient 的角度是相对于水平轴逆时针计算，-45deg 是向右下倾斜，45deg 是向左下倾斜。
容易踩的坑：rotate 后边缘裁剪和定位偏移
旋转伪元素时常见两个问题：
- 旋转后四角超出容器，被父元素
overflow: hidden截断 → 解决：去掉overflow: hidden，或给父容器加overflow: visible - 用
top/left偏移后，transform-origin默认是中心点，导致旋转中心偏移 → 解决：显式设transform-origin: center center或按需调整（如transform-origin: 0 0） - 背景图在旋转后拉伸变形 → 确保
background-size: cover或contain，不要用100% 100%
overflow 和 position，这两个属性一错，整个倾斜就看不见。 
