CSS:设置背景色为窗口宽度的50%

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

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

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

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

当前回答

实现你的问题的一种方法是添加一行到你的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>

2017-11-06 10:59:10

其他回答

这是一个可以在大多数浏览器上运行的示例。基本上你使用两种背景颜色，第一种颜色从0%开始，以50%结束，第二种颜色从51%开始，以100%结束

我使用水平方向:

background: #000000;
background: -moz-linear-gradient(left,  #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );

要进行不同的调整，您可以使用http://www.colorzilla.com/gradient-editor/

2014-05-28 08:17:23

在过去的一个必须支持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中工作。希望它能帮助到别人;)

2014-04-08 10:06:43

如果你想使用50%高度的线性梯度:

background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;

2020-04-16 03:32:26

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

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

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

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

2013-12-12 02:13:15

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

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

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

2017-11-06 10:59:10

CSS:设置背景色为窗口宽度的50%

推荐文章

最新文章

标签