我如何在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以查看它的实际效果。