无论浏览器窗口大小如何，都可视化地连接到内容背景的边距背景

我有一个要求，可以创建一个包含运行一些营销文本下面的页面宽度的波形的初始页面。页面设置包含一个960像素宽的主内容区域，两边有两个具有自动边距宽度的边缘区域。我需要能够将作为内容区域背景的波形图像与作为边缘背景的波形图像进行对齐。实质上，无论用户的浏览器窗口大小如何，波形线都需要在边距和主要内容区域之间进行可视化连接。下面是我必须使用的模板的一个简单示例（并不是说如果需要，我不能添加到结构中）。如果有人对如何实现这一目标有一个好的想法，我将非常感谢您的意见。无论浏览器窗口大小如何，都可视化地连接到内容背景的边距背景

.main { 
    // not sure what to do here, but I know this isn't it 
    // background: url("margin-wave.jpg") no-repeat scroll left top transparent; 
} 

.content { 
    margin: 0 auto; 
    width: 960px; 
    background: url("main-wave.jpg") no-repeat scroll left top transparent; 
} 

<div class="main"> 
    <div class="content"> 
    ... 
    </div> 
</div>

来源

2012-04-10 MattC

其他图像究竟有多少这里涉及？ – Neil 2012-04-10 22:53:58

总共两个：一个用于内容区域（包含较大的波浪，在图像边缘附近变成较小的波浪），一个用于边缘（我需要与内容区域的边缘匹配的较小的波浪）。这个想法是，较小的图像将包含一个或两个波，并会重复。 – MattC 2012-04-10 22:56:22

我的猜测是这样的：

.main { 
    background: url("margin-wave.jpg") repeat-x scroll center top transparent; 
}

来源

2012-04-10 23:12:47 Neil

就是这样。谢谢。 – MattC 2012-04-10 23:22:55

无论浏览器窗口大小如何，都可视化地连接到内容背景的边距背景

回答

相关问题