CSS Div 2 背景色 [英] Css Div 2 background colors

问题描述

我正在尝试使用 2 种背景颜色制作 div，并且我知道您可以使用 50/50 渐变，但是当您使用更极端的颜色时，例如 20/80，颜色开始混合.

>

我看过这个链接

I am attempting to make a div with 2 background colors, and I am aware that you can do the 50/50 gradient, but when you go more extreme, say, 20/80, the colors start to blend.

I have looked at this link 50%/50% hard gradient

but, again, when I attempt to change the values to higher and lower, it starts to blend. Any suggestions? Thanks.

Here is where I am trying to implement it: http://codepen.io/jettc/pen/zrOKqJ

 percent = Math.floor((time/timerTotal)*100);
remainPercent = 100-percent;
console.log(percent, remainPercent);
$("#circle").css("background-image","-webkit-linear-gradient(top, #222222 "+percent+"%, grey "+remainPercent+"%)");

解决方案

The gradient is just rendering how it is supposed to, you just need to change your CSS to make it how you want. To render to solid colors, both percentages must be the same.
Here is some different examples of this:

div{
  width:200px;
  height:200px;
  background:linear-gradient( red 50%, blue 50%);
  }

50/50
<div></div>

div{
   width:200px;
   height:200px;
   background:linear-gradient( red 80%, blue 80%);
}

80/20
<div></div>

div{
   width:200px;
   height:200px;
   background:linear-gradient( red 30%, blue 30%);
}

30/70
<div></div>

div{
   width:200px;
   height:200px;
   background:linear-gradient( red 40%, blue 40%);
}

40/60
<div></div>

Updated codepen

As you can see from the above examples, the key is to set both of the percentages to the same, so there is no space to blend the two colors. See these two images for an example:

这篇关于CSS Div 2 背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！