Question

我使用图片作为我网站的背景。它有黑色/白色渐变，宽度为1px。

CSS：

background-image:url('../image/gradient.png');

使它重复。图像的高度为2000像素。

是否可以动态更改图像的高度，因此它适合所有页面尺寸：如果页面高度小于2000像素，如果页面高度较大，图像的高度应该更小，图像应该更大。

提前致谢

我尝试了各种浏览器内的渐变技术，但它们在所有浏览器上看起来都不一样。

Answer 1

我通常以两种方式之一来解决这个问题。

如果你可以使用CSS3，那么使用CSS渐变（我总是发现http://colorzilla.com/gradient-editor/是一个很好的选择来玩渐变），你可以将它设置为窗口的100％高度。

如果CSS3不是一个选项，我通常只选择一个高度，比如500px，并为此做一个渐变。然后，由于渐变通常从颜色A变为颜色B，因此只需将基础背景颜色设置为与颜色B匹配，渐变在所有显示器上的工作方式都相似。

假设渐变从蓝色变为黑色：

body {
    /* ensure body always fills viewport */
    min-height: 100%;

    /*gradient fades to black so set underlying BG to black*/
    background: url(/path/to/gradient.gif) repeat-x #000; 
}
}

Answer 2

使用CSS3，您可以使用background-size: cover，还有其他一些技术here。

Answer 3

也许我没有得到你问题的正确背景，但这可以很容易地做到像

#SomeImg.src {
width: 100%;
position: absolute;
top: 0;
left: 0;
}

调整此页面的大小以查看其操作：http://css-tricks.com/examples/ImageToBackgroundImage/

Answer 4

您可以创建多个高度不同的图像，并动态匹配最近的图像尺寸。如果您这样做，则需要绑定window.resize事件以在用户调整窗口大小时更新图像。

window.onload = setBackgroundImage;
window.onresize = setBackgroundImage;

function setBackgroundImage() {
    var winH = 500;
    if (document.body && document.body.offsetWidth) {
        winH = document.body.offsetHeight;
    } else if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
        winH = document.documentElement.offsetHeight;
    } else if (window.innerWidth && window.innerHeight) {
        winH = window.innerHeight;
    }

    if (winH > 400) {
        document.body.style.backgroundImage = "url('../image/gradient800px.png')";
    } else if (winH > 800) {
        document.body.style.backgroundImage = "url('../image/gradient1000px.png')";
    } else if (winH > 1000) {
        document.body.style.backgroundImage = "url('../image/gradient1500px.png')";
    } else if (winH > 1500) {
        document.body.style.backgroundImage = "url('../image/gradient2000px.png')";
    } else {
        document.body.style.backgroundImage = "url('../image/gradient400px.png')";
    }
}

我不认为解决方案非常漂亮，但它应该有效。

如何根据当前页面高度调整具有渐变的图像的大小？

4 个答案: