如何在 div 的左侧和右侧拥有可平铺的区域？

Question

我有一个 div#main，它有一个带有渐晕效果的背景图像。

我想将此完整图像保留在页面的中心，但我想要一个图形来平铺屏幕的最左侧平铺到该图像，另一个图形从图像的右侧平铺到屏幕的最右侧。我不关心平铺我意识到我可能会要求设计师让图像的左边缘和右边缘具有相同的颜色和纹理，这样我就可以在背景中放置相同的纹理颜色，但我想看看是否我可以按原样解决它。

所以我认为设计师需要创建两个单独的图形。一个与图像的左边缘很好地平铺和混合，另一个图形与图像的右边缘很好地平铺和混合。

我将如何设置我的 div 和 css，以便左侧图块区域知道从屏幕的最左侧开始并停止在图像的左侧，并且右侧图块区域知道从右边缘开始图像并继续到屏幕的最右侧？

Answer 1

像这样的东西会起作用，其中 bg_tile.jpg 是没有渐晕的平铺背景，而 bg.jpg 是您的描述中发布的图像：

#main_wrapper {
  background: url(/images/bg_tile.jpg) repeat 50% 0;
}

#main {
    width: 960px;
    height: 300px;
    margin: 0 auto;
    background: url(/images/bg.jpg) no-repeat 50% 0 transparent;
}

Cultureamp（iPad 后面）。检查 css 以查看其实际效果。