0

嗯，这有点我想要的：

<body style="background-color: green;">
<div style="float: left; height: 40px; width: 50%; background-color: white;"></div>
<div style="float: left; height: 40px; width: 50%; background-color: black;"></div>
<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted yellow 1px; background-color: green;">
        <img src="http://prog.hu/site/images/logo.gif" width="100%" />
    </div>
</div>
</body>

http://jsfiddle.net/g4EEc/2/

这就是我想要的，唯一的问题是边缘的高度必须是动态的，就像横幅的高度一样。有解决办法吗？

4

2 回答 2

2

您的 HTML 看起来有点吓人。尝试将整体放入包装器中并逐个包装器缩放。为了实现这两种颜色，我在这里使用了 css3 渐变。

<div class="outerwrapper">    
 <div class="wrapper">
    <img src="http://prog.hu/site/images/logo.gif" width="100%" />
 </div>
</div><!-- outer wrapper -->

和CSS：

.outerwrapper{
    height:15%;
    display: block;
    width: 100%;
   background: linear-gradient(to right, #fff 0%,#fff 50%,#000 51%,#000 100%);
    background: -webkit-linear-gradient(left, #fff 0%,#fff 50%,#000 51%,#000 100%); 
}
.wrapper{
    display:block;
    background: green;
    width: 33%;
    margin: 0 auto;
    height: 100%;
}
.left{
    display: block;
    float: left;
    width: 33%;
}
.right{
    display: block;
    float: left;
    width: 33%;
}

http://jsfiddle.net/w639Z/

我也真的建议你不要内联编写样式，而不是使用单独的 css。

于 2013-05-15T11:18:06.107 回答
1

see this fiddle http://jsfiddle.net/g4EEc/3/

code 

<body style="background-color: green;">
<div style="overflow:hidden;background:#ccc;position:relative;z-index:34">
    <div style="height:1000px;width:50%;background:#fff;position:absolute;top:0;left:0;z-index:-2"></div>
    <div style="height:1000px;width:50%;background:#000;position:absolute;top:0;right:0;z-index:-2"></div>
    <img src="http://prog.hu/site/images/logo.gif" style=" border: dotted yellow 1px; background-color: green;display:block;margin:0 auto;z-index:34;"/>
</div>

于 2013-05-15T11:20:17.537 回答