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

前端之家收集整理的这篇文章主要介绍了CSS:设置背景颜色为窗口宽度的50%前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
尝试在“分成两部分”的页面上实现背景; (似乎通过在body标签上设置默认背景颜色,然后将另一个应用到延伸窗口的整个宽度的div上)。

我没有想出一个解决方案,但不幸的是background-size属性不工作在IE7 / 8这是一个必须为这个项目 –

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

因为它只是关于纯色可能有一种方式使用只有常规的背景颜色属性

解决方法

旧版浏览器支持

如果旧的浏览器支持是必须的,所以你不能去使用多个背景或渐变,你可能要在备用的div元素上做这样的事情:

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

示例:http://jsfiddle.net/PLfLW/1704/

解决方案使用一个额外的固定div填充屏幕的一半。由于它是固定的,它将保持在位,即使当您的用户滚动。你可能需要稍后解开一些z-index,以确保你的其他元素在背景div之上,但它不应该太复杂。

如果你有问题,只要确保你的内容的其余部分的z-index高于background元素,你应该很好去。

现代浏览器

如果您只关心新的浏览器,还有其他几种方法可供您使用:

线性渐变:

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

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

这导致对于每种颜色的50%的硬截止,因此没有顾名思义的“渐变”。尝试尝试使用“50%”样式的风格,以查看您可以实现的不同效果

示例:http://jsfiddle.net/v14m59pq/2/

与背景大小的多背景:

您可以将背景颜色应用于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;
}

示例:http://jsfiddle.net/6vhshyxg/2/

EXTRA注意:请注意,在后面的示例中,html和body元素都设置为height:100%。这是为了确保即使您的内容小于页面,背景将至少是用户的视口的高度。没有显式的高度,背景效果只会下降到你的页面内容。这也只是一个好的做法。

原文链接:https://www.f2er.com/css/223522.html

猜你在找的CSS相关文章