调整大小时背景图像不适合浏览器

2023年12月15日 183次阅读

当我调整窗口大小时,我似乎无法让我的背景适合我的浏览器.请帮忙！

以下是显示正在发生的事情的图像：
View images

第一个图像是它应该如何安装,第二个是我水平拉伸时,第三个是我伸展时垂直(对不起,不知道为什么它上传我的图像两次)

这是我正在使用的代码：

body {
    background: url('images/bkg-img.png');
    repeat: no-repeat;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

最佳答案 有很多方法可以做到这一点,如果你将图像设置为身体的背景图像它不会缩小或扩展它将保持相同这是预期的行为.

你可以用……像这样：

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

和他们的风格：

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

为了能够将您的内容放在背景图像之上,请将您的内容放在另一个div中：

<div class="pagewrap">
    <p>Content</p>
</div>

和它的类：

.pagewrap {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

View demo或other techniques,约z-index.

点赞