Question

我在浏览器调整大小时使用javascript来调整div的大小，并在页面加载时最初设置它。（是的，我知道它需要优雅地降级。）我无法通过CSS完成所有这一切的原因是因为屏幕顶部有一个固定的导航栏，需要考虑它。我想调整div（及其渐变背景）的大小以适应浏览器窗口，但是当我更改CSS高度属性时，它只是关闭图像而不是调整大小，这意味着页面的下一部分将无法正常转换。对此有一个简单的解决方法吗？

这是我现在正在使用的CSS：

    #homepage_aboutstrip {
        background-image:url('home/images/gradient-about-background.png');
        background-repeat:repeat-x;
        position:absolute;
        margin-top:0px;
        width:100%;
        height:1050px;
        z-index:1;
    }

使用IMG标签而不是背景图像显然会起作用，但这不是一个选项。

Answer 1

你可以用单行css来做。尝试这个，如果它的工作

background-image:url('home/images/gradient-about-background.png');
background-size: cover

如果图片质量过度膨胀，图像质量可能会受到干扰

Answer 2

它也适用于IE7。

background: url(../img/url.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
background-position: 0 40px; /* Only if you want clip out space for fixed navbar */

CSS：调整背景图像大小而不是切断

2 个答案: