单个html元素是否可以有两种背景颜色? [英] Is it possible to have two background colors for a single html element?

问题描述

我正在尝试向同一个 css 类添加 2 种不同的背景颜色.

I am trying to add 2 different background colors to the same css class.

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 4px;
    background-color: #d6d6c2;
    z-order: 0;

}

是否可以为前 50%(考虑总宽度)设置一种背景颜色，为剩余部分设置另一种背景颜色?如果无法实现，谁能给我一个实现这个目标的技巧?

Is it possible to have one background color for the first 50%(Considering total width) and another background color to the remaining? If it can`t be achived, can anyone suggest me a trick to achive this?

推荐答案

只需使用linear-gradient作为背景，就可以轻松调整方向、颜色、每种颜色的百分比:

Simply use linear-gradient as background and you can easily adjust the direction, colors, % of each color:

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

或者用pseudo-element和简单的background-color然后简单地控制pseudo-element的位置/大小来控制背景:

Or with pseudo-element and simple background-color then simply control the position/size of pseudo-element to control both background:

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

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

You can combine different color inside gradient and also use multiple linear-background in order to achieve more complex color division for your background:

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 变换(旋转、倾斜等):

You can also do the same with pseudo element and also use some CSS transform (rotation, skew, etc):

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

这篇关于单个html元素是否可以有两种背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！