0

我使用图像作为我网站的背景。它具有黑/白渐变，宽度为 1 像素。

CSS：

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

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

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

提前致谢

我尝试了各种浏览器内渐变技术，但它们似乎在所有浏览器上都没有相同的效果。

4

4 回答 4

1

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

如果您可以使用 CSS3，则使用 CSS 渐变（我总是发现http://colorzilla.com/gradient-editor/是玩渐变的好选择），然后您可以将其设置为 100% 的窗口高度。

如果 CSS3 不是一个选项，我通常只选择一个高度，比如 500 像素，并为此制作一个渐变。然后，由于渐变通常从颜色 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; 
}
}
于 2012-06-05T22:58:06.860 回答
0

使用 CSS3，您可以使用这里background-size: cover讨论的其他一些技术。

于 2012-06-05T21:31:14.133 回答
0

也许我没有得到你问题的正确背景，但这可以通过类似的东西轻松完成

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

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

于 2012-06-05T21:38:49.733 回答
0

您可以创建多个具有不同高度的图像并动态匹配最接近的图像尺寸。如果您这样做，您需要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')";
    }
}

我不认为该解决方案非常漂亮，但它应该可以工作。

于 2012-06-05T21:49:05.747 回答