Question

我正在尝试使背景图像全尺寸显示：这并不意味着它应该覆盖所有页面，我的意思是图像宽度应为全窗口尺寸，高度应为自动（图像应重新缩放并如果需要可滚动）。这是我尝试过的：

body{
    width: 100%;
    height: 100%;
    background: url("../Images/BG_main.png")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

，但它仅覆盖整个窗口和图像下部的切口，我也尝试过这个：

body{
    width: 100%;
    height: auto;
    background: url("../Images/BG_main.png")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

，但是如果主体为空，则背景消失。由于我是HTML和CSS的新手，所以我非常感谢您的帮助。

谢谢！

Answer 1

您也应该将HTML的高度也设置为100％，

body, html {height: 100%;}
body {
  background: red url("http://i.stack.imgur.com/jGlzr.png") no-repeat center center fixed;
  background-size: cover;
}

也看不到出了什么问题，请右键单击并选择“检查元素”。然后尝试找到HTML和BODY元素。寻找它们的高度，看看它们是否等于窗口的高度。

https://jsfiddle.net/n6ef81qj/

Answer 2

您需要将.body类的高度设置为100％才能覆盖整个页面。并删除中心中心固定属性。

  body{
        width: 100%;
        height: 100%;
        background: url("../Images/BG_main.png")no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

Answer 3

尝试此操作（以及您的CSS）：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

如何使背景图片全尺寸

3 个答案: