Question

在CSS中，我如何设置这样的图像：https://www.dropbox.com/s/1y8zkiwcq80p2dc/ygb-t.png?dl=0作为前景保持静态并适合任何屏幕，尽管显示器/浏览器分辨率？

这个想法是在其后面有其他图像，当你只滚动背景图像移动时。创建图像叠加效果。

Answer 1

有几种方法可以做到这一点，但这就是我要做的。这将拉伸图像以适合任何屏幕的宽度，并且高度将保持成比例。如果为空，则顶部和底部将由.padding div填写：

`

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

`

Answer 2

有点混乱的div和内联样式，但这是一种你可以拥有你想要的方式而不是你可以将每个div的背景设置为你想要的图片的颜色

＆＃13;

 <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>

＆＃13;

Answer 3

使用部分透明的图片（例如，只有少数非透明区域，如您的示例中，很可能采用png格式）并将其置于具有position: fixed且已满的容器中心窗口大小，像这样：

.container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

其余内容（即您的移动背景图片）必须在此容器外。

此外：

要使图像大小相对于窗口，请按照以下百分比给出：

.container img {
  width: 60%;
  height: auto;
}

示例：https://codepen.io/anon/pen/mKwZVV（使用文本而不是背景图片，缺少部分透明的占位符图片，只是“普通”图片）

如何在CSS中设置覆盖整个页面的静态前景图像？

3 个答案: