Question

我试图限制重复的身体背景图像（有些人称之为精灵）溢出底部。

我使用before:方法的原因是因为这是我能找到的唯一解决方案，可以将透明度添加到背景图片透明而不会导致其他所有内容都具有透明度。

每当我拉出content: " "样式时，都会注意到溢出被正确删除，但图像消失，导致它成为必需。它想要完整地显示在身体下方产生额外可滚动空间的图像。

我尝试了background-size，overflow，甚至background-position的各种组合（这与此并不相关）。

背景图块相当大528x290px，这是一个响应式网站。

以下是使用

的代码

玉

body
  div#body-wall

SASS

#body-wall:before{ //background image
  position: absolute;
  z-index: -1;
  left: -264px; //set half image dimension to remote initial offset
  top: -250px;
  background-image: $body-bg-image;
  background-repeat: repeat;
  // background-size: 528px 290px; //actual image dimensions 528x290
  // width:190%; //set wider to accomodate for top and left offset
  // height:120%; //set wider to accomodate for top and left offset
  opacity: .15;
  content: '';
}
#body-wall{ //implemented for background image
  position: relative; //important for background image to display
}

我有顶部和左侧偏移的原因是让图像处于一个很好的起始位置。请注意，调整顶部和/或左侧定位无法解决问题。

使用此before:方法，我可以做些什么来调整样式以使图像截止。

修改我在我的开发网站上看到的是，还有几百个像素的溢出图像导致网站底部低于页脚div（见小提琴）。

期望的结果，我希望图像在内容的底部被剪掉，而不是让内容框展开直到完成显示，留下几百px的重叠。

我能够重新创建我在this fiddle here中看到的内容，但由于某些原因，我必须在#body-wall中实际评论相对位置，我的开发网站位于何处如果我这样做，bg完全消失为空白。

#body-wall {
    /* position: relative; */
}

请注意，我有一整个bootstrap3，然后迁移到该{temp}的中间bs4网站。另请注意，迁移bs对其显示方式没有任何影响。

有什么建议吗？

CSS限制从溢出的身体重复背景img

0 个答案: