html 一条线两种颜色,一个html元素可能有两种背景颜色吗？

小编典典

只需使用 线性渐变 作为背景，您就可以轻松调整方向，颜色以及每种颜色的百分比：

body {

margin: 0;

background: linear-gradient(to right, red 50%, blue 0%);

height:100vh;

text-align:center;

color:#fff;

}

some content

body {

margin: 0;

background: linear-gradient(to bottom, red 60%, blue 0%);

height:100vh;

text-align:center;

color:#fff;

}

some content

或使用 伪元素 和简单的 背景颜色， 然后简单地控制伪元素的位置/大小即可控制两个背景：

body {

margin: 0;

background: red;

height: 100vh;

position: relative;

text-align:center;

color:#fff;

}

body:before {

content: "";

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 50%;

background: blue;

z-index:-1;

}

some content

body {

margin: 0;

background: red;

height: 100vh;

position: relative;

text-align:center;

color:#fff;

}

body:before {

content: "";

position: absolute;

top: 0;

bottom: 40%;

left: 0;

right: 0;

background: blue;

z-index:-1;

}

some content

如果你想要更多

您可以在渐变内组合不同的颜色，也可以使用多个线性背景，以便为背景实现更复杂的颜色划分：

body {

margin: 0;

background:linear-gradient(30deg, red 50%, blue 50%, blue 70%,orange 70%) left/50% 100% no-repeat,

linear-gradient(-30deg, red 50%, blue 50%, blue 70%,orange 70%) right/50% 100% no-repeat;

height:100vh;

text-align:center;

color:#fff;

}

some content

您还可以对伪元素执行相同的操作，还可以使用一些CSS转换(旋转，倾斜等)：

body {

margin: 0;

background: red;

height: 100vh;

position: relative;

text-align: center;

color: #fff;

overflow: hidden;

}

body:before {

content: "";

position: absolute;

top: 0;

bottom: 0;

left: -50%;

right: 50%;

background: blue;

transform: skew(30deg);

z-index: -1;

}

body:after {

content: "";

position: absolute;

top: 0;

bottom: 0;

left: 50%;

right: -50%;

background: orange;

transform: skew(-30deg);

z-index: -1;

}

some content

2020-05-10