html - div左右半部分的背景颜色不同

Question

我有一个居中的 div 布局。背景中 div 的左侧应为白色，右侧应为绿色。两者都应该延伸到无穷大。

我认为这应该很简单，但我现在不明白。有什么简单的解决办法吗？谢谢！

-----------------------------------------------------
(div 1)     __________________________ 
           |(div 2)         |         |
           |                |         |
           |                |         |
<- white   |     white      |  green  |   green  ->
           |                |         |
           |                |         |
           |________________|_________|

------------------------------------------------------

score 16 · Accepted Answer

使用 the::after和::beforepsuedo 元素。这样你甚至可以得到三种颜色并做意大利国旗！

div {
    height:300px;
    width:100%;
    outline:thin solid black;
    position:relative;
    background:white;
}
div::after, div::before {
    height:300px;
    content:' ';
    position: absolute;
    top: 0;
    width: 33%;
}
div::after {
    right: 0;
    background-color: red;
}
div::before {
    left: 0;
    background-color: green;
}

这是一个小提琴：http: //jsfiddle.net/g8p9pn1v/

及其结果：在此处输入图像描述

score 7 · Accepted Answer

将具有两种颜色的背景图像添加到外部 div 并允许浏览器对其进行缩放（而不是平铺）。

每种颜色都应恰好填充图像宽度的 50%，以确保颜色不会从任何一侧泄漏。

甚至可能将图像绝对定位在内部 div 后面。

有关如何拉伸图像的想法，请参阅此问题：CSS 背景重复

score 4 · Accepted Answer

如何创建两个 div bg-left 和 bg-right，在全宽容器内具有绝对位置。由于它们是绝对定位的，因此您可以在它们之上分层内容。例如，使用引导标记：

<div class="fullwidth">
    <div class="bg-left"></div>
    <div class="bg-right"></div>    

    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                Insert left side content here...
            </div>
            <div class="col-xs-6">
                Insert right side content here...
            </div>
        </div>
    </div>
</div>

然后你的CSS：

.fullwidth {
    position: relative;
    width: 100%;
 }
.bg-left {
    background: #000; 
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 50%;
}
.bg-right {
    right: 0;
    top: 0;
    bottom: 0;
    background: #ddd; 
    position: absolute;
    width: 50%;
}

score 2 · Accepted Answer

2021年最简单的方式：

.container {
  background: linear-gradient(
    to right, 
    red 0%, 
    red 50%, 
    black 50%, 
    black  100%
  );
}

score 1 · Accepted Answer

你可以在外面有两个 div，然后在每个里面有一个你的 div。分别右对齐和左对齐。像这样：

-----------------------------------------------------
(div)                       | (div)
           _________________|_________ 
           |(div)           |  (div)  |
           |                |         |
           |                |         |
<- white   |     white      |  green  |   green  ->
           |                |         |
           |                |         |
           |________________|_________|
                            |
------------------------------------------------------

score 0 · Accepted Answer

0

我会在该 div 中放入另外两个 div 并给它们适当的大小和背景颜色

于 2009-08-14T11:22:31.250 回答

score 0 · Accepted Answer

您可以使用渐变。这是一个网站，您可以在其中获得所需的跨浏览器代码。

http://colorzilla.com/gradient-editor/

一开始使用它可能有点混乱，但我发现它是一个非常强大的工具。

问候！

html - div左右半部分的背景颜色不同

7 回答 7

Related

Reference