javascript - 背景图像水平拉伸

Question

我的网站有一个水平滚动结构并且它是响应式的。例如，我的网站宽度：我的屏幕上的 9600 像素。

我有一个背景图片。打开body后是这样的：

<div class="bg">
  <img class="bg-st" src="themes/bc/images/bc-bg.png"> 
</div>

和 CSS：

.bg {
bottom: 15;
position: absolute;
z-index: 1;
width:100%
height:100%
}
.bg-st {
width:100%;
height:100%;
}

我有，根据屏幕拉伸这个背景图像。我的 CSS 代码不起作用。我如何通过 JavaScript 或 CSS 做到这一点？

Answer 1

要在页面主体上设置背景，请尝试以下 CSS

body {
  background: url(bgimage.jpg) no-repeat;
  background-size: 100%;
} 

如果要拉伸图像并将其设置为全屏，请尝试以下操作...

#imgbg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000;
}

<div class="bg">
  <img id="imgbg" src="themes/bc/images/bc-bg.png"> 
</div>

Answer 2

您可以将其设置为 div 的背景，并将 background-size 属性设置为覆盖：

.bg {
bottom: 15;
position: absolute;
z-index: 1;
width:100%
height:100%
background: url("themes/bc/images/bc-bg.png") no-repeat left fixed;
background-size: cover;
}

Answer 3

<div class="main">
    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa
<div class="bg">
  <img id="imgbg" src="image.jpg">
</div>

它显示这样的输出

如果您使用如下代码

<style>
#imgbg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000;
}
</style>

<div class="main">
    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa
<div class="bg">
  <img id="imgbg" src="image.jpg">
</div>

然后它显示如下图像....