一尘不染

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

css

试图在“分成两部分”的页面上获得背景;相对两侧的两种颜色(似乎是通过background-colorbody标记上设置默认值,然后将另一种颜色应用到div可拉伸整个窗口宽度的来完成的)。

我确实提出了一个解决方案,但不幸的是,该background-size属性在IE7 / 8中不起作用,这对于该项目是必不可少的-

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

由于它只是纯色,也许有一种只使用常规background-color属性的方法吗?


阅读 591

收藏
2020-05-16

共1个答案

一尘不染

较旧的浏览器支持

如果必须有较旧的浏览器支持,那么您就不能同时使用多个背景或渐变,那么您可能需要对备用div元素执行以下操作:

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

该解决方案使用一个额外的固定div来填充屏幕的一半。由于它是固定的,因此即使您的用户滚动,它也将保持在原位。您稍后可能需要弄弄一些z索引,以确保您的其他元素位于背景div上方,但不要太复杂。

如果遇到问题,只需确保其余内容的z索引高于背景元素,就可以了。


现代浏览器

如果仅是较新的浏览器,则可以使用其他两种方法:

线性渐变:

这绝对是最简单的解决方案。您可以在主体的背景属性中使用线性渐变以获得各种效果。

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

每种颜色都会导致50%的硬截止,因此顾名思义,没有“渐变”。尝试对样式的“50%”部分进行试验,以查看可以实现的不同效果。

具有背景大小的多个背景:

您可以将背景颜色应用于html元素,然后将背景图像应用于body元素,并使用background-size属性将其设置为页面宽度的50%。这会产生类似的效果,尽管实际上只有在使用一两个图像时才在渐变上使用。

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('http://i.imgur.com/9HMnxKs.png');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

额外的注意: 请注意,在后面的示例中,htmlbody元素均设置为height:100%。这是为了确保即使您的内容小于页面,背景也将至少是用户视口的高度。没有明确的高度,背景效果将仅下降到页面内容。一般来说,这也是一个很好的做法。

2020-05-16