CSS：设置背景颜色为窗口宽度的50％ [英] CSS: Set a background color which is 50% of the width of the window

问题描述

尝试在分成两部分的页面上实现背景;两个颜色（看起来是通过在 body 标签上设置默认 background-color a div ，它延伸了窗口的整个宽度）。

Trying to achieve a background on a page that is "split in two"; two colors on opposite sides (seemingly done by setting a default background-color on the body tag, then applying another onto a div that stretches the entire width of the window).

我想出了一个解决方案， background-size 属性不适用于此项目必须的IE7 / 8中 -

I did come up with a solution but unfortunately the background-size property doesn't work in IE7/8 which is a must for this project -

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

因为它只是纯色，可能有一种方式只使用常规 background-color 属性？

Since it's just about solid colors maybe there is a way using only the regular background-color property?

推荐答案

旧版浏览器支持

如果以前的浏览器支持是必须的，所以你不能使用多个背景或渐变，你可能会想要这样做一个备用 div 元素：

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

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

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

The solution uses an extra fixed div that fills half the screen. Since it's fixed, it will remain in position even when your users scroll. You may have to fiddle with some z-indexes later, to make sure your other elements are above the background div, but it shouldn't be too complex.

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

If you have issues, just make sure the rest of your content has a z-index higher than the background element and you should be good to go.

如果更新的浏览器是您唯一关心的问题，您还可以使用其他几种方法：

If newer browsers are your only concern, there are a couple other methods you can use:

线性渐变：

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

This is definitely the easiest solution. You can use a linear-gradient in the background property of the body for a variety of effects.

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

这会对每种颜色产生50％的硬截止，如名称所暗示的梯度。尝试尝试使用50％样式来查看您可以实现的不同效果。

This causes a hard cutoff at 50% for each color, so there isn't a "gradient" as the name implies. Try experimenting with the "50%" piece of the style to see the different effects you can achieve.

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

多个背景与背景大小：

您可以对 html 元素应用背景颜色，然后将背景图像应用于 body 元素，并使用 background-size 属性将其设置为页面宽度的50％。

You can apply a background color to the html element, and then apply a background-image to the body element and use the background-size property to set it to 50% of the page width. This results in a similar effect, though would really only be used over gradients if you happen to be using an image or two.

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％。这是为了确保即使您的内容小于页面，背景将至少是用户的视口的高度。没有显式的高度，背景效果只会下降到你的页面内容。这也只是一个好的做法。

EXTRA NOTE: Notice that both the html and body elements are set to height: 100% in the latter examples. This is to make sure that even if your content is smaller than the page, the background will be at least the height of the user's viewport. Without the explicit height, the background effect will only go down as far as your page content. It's also just a good practice in general.

这篇关于CSS：设置背景颜色为窗口宽度的50％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！