Css 如何实现左右背景分割,使中间的div可见?
我有一个Css 如何实现左右背景分割,使中间的div可见?,css,Css,我有一个header容器div,它延伸了浏览器宽度的100%,就像StackOverflow一样。在这个div中是实际的标题,其固定宽度位于页面中心 我想要的是有一个特定的背景颜色只适用于标题的左侧,而不同的颜色适用于标题的右侧。我实际上是在尝试在标题容器div上创建一个分割背景颜色方案 下面是我目前的一些情况 HTML: 我不能应用两种背景色并在标题容器div上的50%标记处分割它们(如果可能,我希望最大限度地兼容浏览器)。所以我想我需要创建两个额外的div,比如header bg left和
header容器
div,它延伸了浏览器宽度的100%,就像StackOverflow一样。在这个div中是实际的标题
,其固定宽度位于页面中心
我想要的是有一个特定的背景颜色只适用于标题的左侧,而不同的颜色适用于标题的右侧。我实际上是在尝试在标题容器
div上创建一个分割背景颜色方案
下面是我目前的一些情况
HTML:
我不能应用两种背景色并在标题容器div上的50%标记处分割它们(如果可能,我希望最大限度地兼容浏览器)。所以我想我需要创建两个额外的div,比如
header bg left
和header bg right
,并将它们分别浮动到主中心header
div的左侧和右侧。但是我不知道如何让它们填满浏览器窗口边缘的剩余空间,而停在窗口边缘header
div.有更好的方法吗?一种方法是使用:after
和:before
创建具有所需颜色的元素
#header-Container:before,
#header-Container:after{
content:'';
position:absolute;
z-index:-1;
width:50%;
top:0;
bottom:0;
}
#header-Container:before{left:0;background-color:yellow;}
#header-Container:after{right:0;background-color:green;}
演示
另一种是使用两种颜色的渐变背景
#header-Container { position: relative; height: 190px;
background: -moz-linear-gradient(left, #eaf700 0%, #eaf700 50%, #0fe500 50%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eaf700), color-stop(50%,#eaf700), color-stop(50%,#0fe500));
background: -webkit-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
background: -o-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
background: -ms-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
background: linear-gradient(to right, #eaf700 0%,#eaf700 50%,#0fe500 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaf700', endColorstr='#0fe500',GradientType=1 );
}
演示
(渐变css from)我不能应用两种背景色并以50%的比例分割它们为什么@Danko我不认为它能与很多浏览器兼容,尤其是IE8。这两种浏览器在大多数浏览器中都能工作吗?我不支持IE6,也可能忽略IE7。但是它必须支持IE8注意:对于第一个解决方案,您需要删除
#header Container
上的背景色,因为伪元素位于其后面(z-index:-1
),我非常喜欢第一个示例。它看起来干净整洁,很好用。您个人会选择哪一个?@volumeone您只能选择IE8支持的第一个选项
#header-Container:before,
#header-Container:after{
content:'';
position:absolute;
z-index:-1;
width:50%;
top:0;
bottom:0;
}
#header-Container:before{left:0;background-color:yellow;}
#header-Container:after{right:0;background-color:green;}
#header-Container { position: relative; height: 190px;
background: -moz-linear-gradient(left, #eaf700 0%, #eaf700 50%, #0fe500 50%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eaf700), color-stop(50%,#eaf700), color-stop(50%,#0fe500));
background: -webkit-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
background: -o-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
background: -ms-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
background: linear-gradient(to right, #eaf700 0%,#eaf700 50%,#0fe500 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaf700', endColorstr='#0fe500',GradientType=1 );
}