试图在“一分为二”的页面上实现背景;两种相对的颜色(似乎是通过在body标签上设置默认的背景色来完成的,然后将另一种颜色应用到扩展整个窗口宽度的div上)。

我确实提出了一个解决方案,但不幸的是,背景大小的属性不工作在IE7/8,这是一个必须为这个项目-

body { background: #fff; }
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

既然它只是关于纯色,也许有一种方法只使用常规的背景颜色属性?


当前回答

这应该与纯css工作。

background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));

仅在Chrome中测试。

其他回答

实现“一分为二”背景的简单解决方案:

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

你也可以用角度来表示方向

background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);

在过去的一个必须支持IE8+的项目中,我使用data-url格式编码的图像实现了这一点。

图像是2800x1px,一半白色,一半透明。 工作得很好。

body {
    /* 50% right white */
    background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y;

   /* 50% left white */
   background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y;
}

你可以看到它在JsFiddle中工作。 希望它能帮助到别人;)

最可靠且语义正确的选项是使用定位固定的伪元素(::after或::before)。使用这种技术时,不要忘记为容器内的元素设置z-index。还要注意,伪元素的content:""规则是需要的,否则它不会被渲染。

#container {...}

#content::before {
    content:"";
    background-color: #999;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;    
    width: 50%; 
    z-index: 1;
}


#content * {
  position: relative;
  z-index:2;
}

生活例子: https://jsfiddle.net/xraymutation/pwz7t6we/16/

实现你的问题的一种方法是添加一行到你的div的css:

background-image: linear-gradient(90deg, black 50%, blue 50%);

这里是一个演示代码和更多选项(水平,对角线等),你可以点击“运行代码片段”来查看它的现场。

.abWhiteAndBlack { background-image: linear-gradient(90deg, black 50%, blue 50%); height: 300px; width: 300px; margin-bottom: 80px; } .abWhiteAndBlack2 { background-image: linear-gradient(180deg, black 50%, blue 50%); height: 300px; width: 300px; margin-bottom: 80px; } .abWhiteAndBlack3 { background-image: linear-gradient(45deg, black 50%, blue 50%); height: 300px; width: 300px; margin-bottom: 80px; } Vertical: <div class="abWhiteAndBlack"> </div> Horizonal: <div class="abWhiteAndBlack2"> </div> Diagonal: <div class="abWhiteAndBlack3"> </div>

你可以使用:after伪选择器来实现这一点,尽管我不确定该选择器的向后兼容性。

body {
    background: #000000
}
body:after {
    content:'';
    position: fixed;
    height: 100%;
    width: 50%;
    left: 50%;
    background: #116699
}

我用它在页面背景上有两种不同的渐变。