如何在CSS中设置覆盖整个页面的静态前景图像？
如何在CSS中设置覆盖整个页面的静态前景图像？
提问于 2018-06-14 07:24:50
在CSS中，我如何设置一个像这样的图像：https://www.dropbox.com/s/1y8zkiwcq80p2dc/ygb-t.png?dl=0作为前景，它保持静态，并适合任何屏幕，尽管显示器/浏览器的分辨率？
这个想法是在这个后面有其他的图像，当你滚动的时候只有背景图像移动。创建图像叠加效果。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-14 07:42:58
有几种方法可以做到这一点，但我会这样做。这将拉伸图像以适合任何屏幕的宽度，并且高度将保持成比例。顶部和底部，如果为空，将由.padding div填充：
`
.bg{
margin: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display:flex;
flex-direction: column;
}
.img {
width:100vw;
align-self: center;
height: auto;
}
.padding {
flex: 1;
background-color: pink; //MAKE THIS THE COLOR OF YOUR IMAGE
}
.content {
height: 300vh;
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}<div class="bg">
<div class='padding'></div>
<img class='img' src="https://photos-3.dropbox.com/t/2/AACmD9Oh8XyU7XsuoMbGiFvhR74Kyf2mmCrvJnHqoPIyQA/12/548079133/png/32x32/3/1528948800/0/2/ygb-t.png/EJK827EEGEYgAigC/X_nlbu7xSKtG1OsirOK65Kyxjviska-5QQCExTwpanM%2ChhX24rQp1YsmgIno_q-Sb66Y78jGxhYf_ZswlAPtHwI?dl=0&preserve_transparency=1&size=1600x1200&size_mode=3">
<div class='padding'></div>
</div>
<div class="content"></div>
`
Stack Overflow用户
发布于 2018-06-14 07:35:15
div和内联样式有点乱，但这是一种你可以拥有你想要的东西的方式，并且你可以将每个div的背景设置为你想要的图片，而不是拥有你想要的颜色
<body style="height: 200vh;">
<div class="1" style="height: 20vh;
background-color: red;"></div>
<div class="1" style="height: 20vh;
background-color: red;"></div>
<div class="1" style="height: 20vh;
background-color: red;"></div>
<div class="1" style="height: 20vh;
background-color: green;"></div>
<div class="1" style="height: 20vh;
background-color: blue;"></div>
<div class="1" style="height: 20vh;
background-color: yellow;"></div>
<div class="1" style="height: 20vh;
background-color: orange;"></div>
<div class="1" style="height: 20vh;
background-color: purple;"></div>
<div class="container">
<img class="stay" src="https://photos-3.dropbox.com/t/2/AACmD9Oh8XyU7XsuoMbGiFvhR74Kyf2mmCrvJnHqoPIyQA/12/548079133/png/32x32/3/1528948800/0/2/ygb-t.png/EJK827EEGEYgAigC/X_nlbu7xSKtG1OsirOK65Kyxjviska-5QQCExTwpanM%2ChhX24rQp1YsmgIno_q-Sb66Y78jGxhYf_ZswlAPtHwI?dl=0&preserve_transparency=1&size=1600x1200&size_mode=3" style="vertical-align: middle;
border-style: none;
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;">
</div>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50847640
复制相关文章
相似问题