HTML5 - 在具有不同渐变颜色的页面中心放置宽横幅的设计

Question

我们的图形设计师创建了一个主页设计，其中包含一个中央横幅，其中包含文本和按钮，位于我们网站的中心，应该占据页面宽度的100％。

横幅分为三个部分：“真实”内容（中间），左侧和右侧应动态拉伸，包含不同的渐变颜色。

当试图放置它时，我裁剪横幅的中间并按顺序居中，我使用了这段代码：

                  <div style="background-image: url('/images/WideBannerBG.png') ;width:1100px ;margin: 0px auto ;background-repeat:no-repeat;height:415px" >

哪种方法正常。

要设置横幅的左侧和右侧，我裁剪了两条细垂直线（1/415）并使用HTML放置了一个代码以水平重复它，从而动态填充左右间隙（根据页面分辨率） - 并且失败了......这是代码

    <div style="width: 100%; overflow:hidden ">
         <div style="float:right;background-image: url('/images/WideBannerLeftStripe.png');width:100%;background-repeat:repeat-x;height:415px"> </div>          

                    <div style="background-image: url('/images/WideBannerBG.png') ;width:1100px ;margin: 0px auto ;background-repeat:no-repeat;height:415px" > ....
 ...
...</div>
         <div style="float:right;background-image: url('/images/WideBannerRightStripe.png');width:100%;background-repeat:repeat-x;height:415px"> </div>         
</div>

这是横幅（没有文字和网站相关的东西）。

您是否熟悉以固定尺寸DIV（或桌子）为中心并且左侧和左侧具有不同背景的任何方式？根据屏幕分辨率动态拉伸（使用repeat-x）的右侧？

Answer 1

您可以使用CSS3堆叠多个背景，只需用逗号分隔每个背景声明。然后使用background-position属性定位它们。到顶部（0）和左边（0），第二个背景从左边和顶部（0）50％。

然后使用背景大小使它们拉伸div的高度（100％）和每个50％的宽度。

.multi-background {
   background-image: url(WideBannerLeftStripe.png), url(WideBannerRightStripe.png);
   background-position: 0 0, 50% 0;
   background-repeat: no-repeat;
   background-size: 100% 50%, 100% 50%;
{