如何适合粘性背景图像并防止CSS溢出? [英] How to fit a sticky background image and prevent overflow in css?

问题描述

我正在尝试自动调整粘性背景图像的大小以覆盖我的整个 div 标签

I'm trying to auto-resize a sticky background image to cover my entire div tag

我的代码:

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  min-height: 100%;
  min-width: 100%;
}

#header {
  height: 100px;
  background: black;
  width: 100%;
}

#rest {
  height:1000px;
  width: 100%;
  position: relative;
  background-color: blue;
}

#background {
  background-image: url("https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-repeat: no-repeat;
  height: 500px;
  position: sticky;
  top: 0;
}

#content {
  min-height: 100%;
  width: 50%;
  background-color: yellow;
  z-index: 1;
  left: 50%;
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  position: absolute;
}

<div id="header"></div>
<div id="rest">
  <div id="content">
    <span>
           mt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vmpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in v consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor
        </span>
  </div>
  <div id="background"></div>
</div>

但是，文本 content 溢出并且图像不能覆盖整个背景.有什么方法可以解决这个问题，并使背景适合以下给定的方向?

However, the text content overflows and the image doesn't cover the entire background. Is there some way to fix that and make the background fit in the given below orientation?

修改
我必须修改主体 height:1000px ，以便可见我需要的效果，但是仍然可以通过 height:100％做到吗?

Edit
I had to modify the body height:1000px so that the effect of what I need is visible but is there anyway to do it via height:100%?

推荐答案

最后，我知道了！
诀窍是使用 grid ，花了我一段时间，但我创建了这个杰作！

Finally, I figured it out!
The trick was in using grid, it took me a while but I created this master piece!

参考链接:如何使用CSS创建粘性背景?

html,
body {
  margin: 0;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
}

#header {
  height: 100px;
  width: 100%;
  background: black;
}

#rest {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background: blue;
}

#content {
  width: 50%;
  z-index: 0;
  grid-row: 1;
  grid-column: 1;
  margin: 0 auto;
  background: yellow;
}

#sticky_back {
  width: 100%;
  height: 100vh;

  grid-row: 1;
  grid-column: 1;
  position: sticky;
  top: 0;
  background-image: url("https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-repeat: no-repeat;
  background-size: cover;
}

<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="header"></div>
  <div id="rest">
    <div id="sticky_back"></div>
    <div id="content">
      <span>
        psum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim vennostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut laborere magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut alnostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut laborere magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut alnostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim e et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut laborere magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio
      </span>
    </div>
  </div>
</body>

</html>

注意
唯一的缺陷是，当宽度小于 206px
时，内容似乎会溢出尝试在此处更改宽度: https://jsfiddle.net/xh264cvd/7/
但我想这种解决方案从长远来看是行得通的，恭喜！

Note
The only flaw is that the content seems to overflow when the width is less than 206px
try changing the width here: https://jsfiddle.net/xh264cvd/7/
but I guess this solution works in the long run, kudos!

这篇关于如何适合粘性背景图像并防止CSS溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！