Question

嗯，这有点我想要的：

<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/

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

Answer 1

您的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。

Answer 2

看到这个小提琴http://jsfiddle.net/g4EEc/3/

代码

<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>

带有自动边缘的横幅（绝对位置）

2 个答案: