css切/分割背景图详解（background-image)

<div class="box">
      <div class="box__img"></div>
    </div>

html {
  font-size: 62.5%;
}
.box {
  padding: 10rem;
  margin: auto;
  width: 100rem;
}
.box__img {
  background-image: linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.7) 50%,
      transparent 50%
    ),
    url(./img.png);
  background-size: cover;
  border-radius: 5px;
  height: 56.5rem;
}

重点：

 background-image: linear-gradient(

      110deg,

      rgba(255, 255, 255, 0.7) 0%,

      rgba(255, 255, 255, 0.7) 70%,

      transparent 70%

    ),

    url(./img.png);

在这段 CSS 代码中，我使用了 linear-gradient 函数来创建一个线性渐变，将背景图像分割成两部分。其中，110deg: 这是渐变的方向角度，也是图中分割线的由来。 rgba(255, 255, 255, 0.7) 表示半透明的白色，0% 表示从渐变的起始点开始使用这个颜色；50%表示渐变的中间点。transparent 表示透明。这样的设计使得背景图像呈现出一种切割的效果，增强了视觉上的吸引力。 

图例：

（0% 50% 50%）：

（0% 40% 60%） 

 （0% 70% 70%）：