Question

我已经设置了一些背景div来主题我正在制作的博客。我使用3种颜色作为标题，灰色背景，我想在背景中添加纹理。我有想要平铺的半透明图像，但我不确定这项工作的最佳方法。我不想在包含图像的div上使用position: fixed;，以便在滚动时它会移动。

示例代码： http://jsfiddle.net/YPXmT/

有没有办法在没有滚动条的情况下实现这一目标？（注意，我不想摆脱滚动条，因为内容可能需要滚动。）

Answer 1

从你的例子小提琴出发，你就是那里的大部分。您所要做的就是使用backgroundTexture div height和width 100%代替您使用的静态像素值：

#backtexture {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background : url('http://static.tumblr.com/wyzt2fm/Hq8mhgfry/hp_asset_diagonalline.png');
}

更简单的更新：
简单是最好的时候您需要做的就是添加：

body{
    position: relative
}

不要打扰制作容器div并重新排列下面的元素，只是让身体的位置相对应该为你解决这个问题。

更新： （使用上面的更新，为后代保留此内容）
根据下面的注释，使用上面的代码使窗口滚动到可见空间之外的任何内容都不包括背景。这是因为div设置为position: absolute和height/width: 100%。 div的大小已经达到可视空间的大小，但任何超出该范围的内容都会导致背景div看起来已停止。要解决此问题，您只需稍微调整HTML和CSS。而不是上面的CSS使用：

#backtexture {
    width: 100%;
    height: 100%;
    background : url('http://static.tumblr.com/wyzt2fm/Hq8mhgfry/hp_asset_diagonalline.png');
}

请注意，我们删除了position:absolute和overflow:hidden。接下来我们更改HTML，以便后台不仅仅是放在页面上的空div，而是用作页面上所有其他元素的容器：

<div id="backtexture">
        <div id="redtop"></div>
        <div id="orangetop"></div>
        <div id="yellowtop"></div>
        <div id="wrapper">
</div>

那应该这样做。

分叉小提琴：http://jsfiddle.net/digthedoug/pVxSq/

当我已经在使用背景时，在整个页面上平铺图像

1 个答案: