Css Div 2 background colors

问题

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+"%)");

回答1:

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:

回答2:

"-webkit-linear-gradient(top, #222222 "+percent+"%, grey "+percent+"%)"

You have to use the same percentages:

background-image: linear-gradient(bottom, #FFD51A 20%, #FAC815 20%);

background-image: linear-gradient(bottom, #FFD51A 80%, #FAC815 80%);

... the percentages are defining the color-stops position.

More about gradients here: http://www.w3schools.com/css/css3_gradients.asp and here https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

来源：https://stackoverflow.com/questions/34045414/css-div-2-background-colors

标签

javascript

jquery

html

css