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

问题描述

  .stepwizard-row：before {
 top：14px; 
 bottom：0; 
位置：绝对; 
 content：; 
宽度：100％; 
 height：4px; 
背景颜色：＃d6d6c2; 
 z-order：0; 
 
 
 
 
 $ b $ p 
 $ b 
是否有可能为前50个背景色％（考虑总宽度）和其他背景颜色？ 
如果它不能被执行，任何人都可以为我提供一个操作来实现这个功能吗？ 
 
解决方案
 strong>线性渐变作为背景，您可以轻松调整每种颜色的方向，颜色和％：
 $ b 
 
 
 
  body {margin：0;背景：线性渐变（向右，红色50％，蓝色0％）;高度：100vh;文本对齐：中心; color：#fff;}  
 
 一些内容 
 
 
 
 =falsedata-console =truedata-babel =false> 
 
  body {margin：0;背景：线性梯度（至底部，红色60％，蓝色0％）;高度：100vh;文本对齐：中心; color：#fff;}  
 
 一些内容 
 
或伪元素和简单的元素 background-color ，然后简单地控制伪元素的位置/大小来控制背景： 
 
 
 
 
 
  body {margin：0;背景：红色;身高：100vh;位置：相对;文本对齐：中心;颜色：#fff;} body：before {content：;位置：绝对; top：0;底部：0;左：0;右：50％;背景：蓝色; z-index：-1;}  
 
  code> 
 
 
 
 
 
 
 
 
 
  body {margin：0;背景：红色;身高：100vh;位置：相对;文本对齐：中心;颜色：#fff;} body：before {content：;位置：绝对; top：0;底部：40％;左：0;正确：0;背景：蓝色; z-index：-1;}  
 
  code> 

如果您想要更多

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

body {margin：0;背景：线性梯度（30度，红色50％，蓝色50％，蓝色70％，橙色70％）左/ 50％100％无重复，线性梯度（-30度，红色50％，蓝色50％，蓝色70％，橙色70％）右/ 50％100％不重复;高度：100vh;文本对齐：中心; color：#fff;}

 一些内容 
 
你也可以用伪元素做同样的事情，也可以使用一些CSS变换（旋转，歪斜等）： 
 
 
 
 
 
  body {margin： 0;背景：红色;身高：100vh;位置：相对; text-align：center;颜色：#fff; overflow：hidden;} body：before {content：;位置：绝对; top：0;底部：0;剩下：-50％;右：50％;背景：蓝色;变形：歪斜（30度）; z-index：-1;} body：after {content：;位置：绝对; top：0;底部：0;剩下：50％;右：-50％;背景：橙色; transform：skew（-30deg）; z-index：-1;}  

code>

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;

}

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?

解决方案

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

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

If you want more

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

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屋！