如何在 div 的左侧和右侧有一个可以平铺的区域？答案

【问题标题】：How can I have a tile-able area to the left and right of a div?如何在 div 的左侧和右侧有一个可以平铺的区域？
【发布时间】：2011-12-12 04:39:25
【问题描述】：

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

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

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

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

【问题讨论】：

你能展示一个更好的模型示例吗？我出于某种原因想象中间是蓝色的，而左侧/右侧是平铺的背景？对吗？

标签： html css tiles

【解决方案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 以查看它的实际效果。

【讨论】：