定位背景图片答案

【问题标题】：Positionning background-image定位背景图片
【发布时间】：2022-01-19 16:30:54
【问题描述】：

我希望我的图像在倾斜块中的滚动条上滚动，但是一旦达到某个滚动级别，您就会开始看到出现空白。

我就是这样做的

.single-race__s2-container{
  padding: 150px 0 300px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  background-attachment: fixed;
  transform: skewY(-5deg);
  margin-top: 150px;
  margin-bottom: 1500px;
}

.single-race__s2-container:before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display:block;
  background-color: rgba(0,0,0, 0.5);
}
.single-race__s2-content{
    transform: skewY(5deg);
}

 <div class="single-race__s2">
        <div class="single-race__s2-container"
            style="background-image: url('https://i.picsum.photos/id/355/1440/1000.jpg?hmac=QRHj9Ni2849l3Nfu1nLwhURgp2ncK9AsIsQZuXRHfVc')">
            <div class="single-race__s2-content o-wrapper">
                <p>Lorem ipsum dolor</p>
                 <span>test</span>
            </div>
        </div>
    </div>

我这样做是正确的还是没有解决方案？

【问题讨论】：

你需要发布生成的代码，这样我们才能真正看到你所做的结果
我编辑了我的帖子，你应该更好地想象问题
我认为似乎有效
不，在卷轴上，我出现了一个空白
空白是由 margin-bottom 600px 产生的空白页面的一部分。我不确定你想要达到什么目的

标签： html css sass

【解决方案1】：

您可以尝试使用clip-path 属性。为您的背景图像创建一个容器，该容器具有您想要的形状并将图像加载为背景图像。应用固定到该容器的位置，将背景图像的高度设置为例如将容器高度加倍，然后使用overflow: scroll 这样背景图片就可以滚动了，底部不显示空白。

HTML：

<div class="image-container">
  <div class="image"></div>
</div>

CSS：

 .image-container {
  clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%);
  width: 100%;
  height: 300px;
  position: fixed;
  overflow: scroll;
 }
 .image {
   background-image: url(https://i.picsum.photos/id/355/1440/1000.jpg?hmac=QRHj9Ni2849l3Nfu1nLwhURgp2ncK9AsIsQZuXRHfVc);
   background-size: cover;
   background-position: center;
   width: 100%;
   height: 600px;
 }

根据需要调整高度，并确保为所有标准浏览器添加剪辑路径的前缀。

【讨论】：