如何在 CSS 中创建双色分割背景？

CSS：设置窗口的 50% 的背景颜色

尝试在页面上实现“分成两半”；相对面有两种颜色？幸运的是，有多种方法可以实现此效果，具体取决于您的浏览器支持要求。

旧版浏览器支持

如果必须支持旧版浏览器，您需要使用一个额外的固定 div 来填充一半屏幕并设置其背景颜色。

<pre class="brush:php;toolbar:false">position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink; 

}

现代浏览器

如果较新的浏览器是您唯一关心的，您还有更多选项：

线性渐变：

<pre class="brush:php;toolbar:false">height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);

}

多个背景背景大小：

<pre class="brush:php;toolbar:false">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;

}
pre>

不要忘记将两者的高度设置为 100% html 和 body 元素以确保背景覆盖整个视口。

以上是如何在 CSS 中创建双色分割背景？的详细内容。更多信息请关注PHP中文网其他相关文章！