我正在尝试将2种不同的背景色添加到同一CSS类中。
.stepwizard-row:before { top: 14px; bottom: 0; position: absolute; content: " "; width: 100%; height: 4px; background-color: #d6d6c2; z-order: 0; }
前50%(考虑总宽度)是否可以有一种背景色,而其余的可以有另一种背景色?如果无法实现,那么有人可以建议我实现这一目标吗?
只需使用 线性渐变 作为背景,您就可以轻松调整方向,颜色以及每种颜色的百分比:
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