2

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

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

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

4

1 回答 1

3

从您的示例小提琴开始，您大部分时间都在那里。您所要做的就是制作您的 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: absoluteandheight/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:absoluteand 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/

于 2013-01-30T20:41:11.420 回答