如何在CSS中旋转排除模式的遮罩图像（mask-image）而不旋转整个元素

嘿，我明白你的困扰——直接给元素加rotate会把整个背景和遮罩一起转，完全不是你想要的效果。其实咱们可以把需要旋转的遮罩图像单独分离出来处理，用伪元素配合element()函数就能实现只旋转遮罩图的需求，具体改法如下：

核心思路是：把遮罩里的那张图片放到元素的伪元素中，给伪元素单独应用旋转，然后让主元素的mask-image引用这个已经旋转好的伪元素，这样主元素的背景就不会跟着旋转了。

修改后的代码：

.light-layer {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100rem;
  margin-top: -2.55rem;
  background: linear-gradient(180deg, rgba(53, 99, 233, 0.98) 1.17%, rgba(25, 53, 136, 0.99) 36.14%, #000D34 96.66%);
  // 引用伪元素作为遮罩图像，保留原来的线性渐变遮罩
  mask-image: element(.light-layer::before), linear-gradient(#fff 0 0);
  mask-repeat: no-repeat;
  mask-composite: exclude;
  // 主元素不需要设置mask-position，交给伪元素控制
}

.light-layer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // 把原来的遮罩图放到伪元素背景
  background: url("https://i.ibb.co/FzmCjLL/Jqtz.png") no-repeat;
  // 这里设置你需要的旋转角度，比如45deg
  transform: rotate(45deg);
  // 对应原来的mask-position，调整伪元素背景的位置
  background-position: 50% 20%;
  // 确保伪元素不影响页面布局和交互
  pointer-events: none;
  visibility: hidden;
}

简单解释下关键步骤：

• 伪元素::before承载了需要旋转的遮罩图像，我们给它加transform: rotate()就能单独旋转这张图
• 主元素的mask-image用element()函数引用这个伪元素，相当于把旋转后的图像作为遮罩源
• 伪元素设置visibility: hidden是为了让它不在页面上显示，只作为遮罩的数据源；pointer-events: none避免它干扰主元素的交互
• 原来的mask-position换成伪元素的background-position，用来控制遮罩图的位置

这样调整后，你就能单独旋转遮罩里的图像，而主元素的渐变背景完全不会跟着旋转啦！

备注：内容来源于stack exchange，提问作者PowerKuz