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

roejwanj  于 2023-10-21  发布在  其他
关注(0)|答案(7)|浏览(211)

我有一个居中的div布局。背景中div的左侧应为白色,右侧应为绿色。两者都应该延伸到无穷大。
我想应该很简单,但我现在就是不明白。有简单的解决办法吗?谢谢你,谢谢!

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

------------------------------------------------------
sqougxex

sqougxex1#

使用::after::before伪元素。这样你甚至可以得到三种颜色和做意大利国旗!

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

Here's a fiddle:http://jsfiddle.net/g8p9pn1v/

其结果是:

d6kp6zgx

d6kp6zgx2#

将具有这两种颜色的背景图像添加到外部div,并允许浏览器缩放它(而不是平铺它)。
每种颜色都应该填充图像宽度的50%,以确保颜色不会在任何一侧泄漏。
甚至可以将图像完全放置在内部div后面。
有关如何拉伸图像的想法,请参阅此问题:CSS Background Repeat

33qvvth1

33qvvth13#

如何创建两个div bg-left和bg-right,在一个全宽容器中有一个绝对位置。由于它们是绝对定位的,因此您可以在它们上面放置内容。例如,使用bootstrap markup:

<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%;
}
z3yyvxxp

z3yyvxxp4#

2021年最简单的方法:

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

xzv2uavs5#

你可以在外面放两个div,然后在每个里面放一个div。分别右对齐和左对齐。就像这样:

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

lymgl2op6#

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

vojdkbi0

vojdkbi07#

您可以使用渐变。这是一个网站,你可以得到你需要的跨浏览器代码。
http://colorzilla.com/gradient-editor/
这可能是一个有点混乱的使用在一开始,但我发现它是一个非常强大的工具。
问候!

相关问题