如何在一个div背景中嵌套颜色？

Question

How I can put multiple nested colors (or 2 colors precisely) to a div in css? If it's possible to do that, how I can specify the nesting form, as percentage of each color, position, etc?

I mean the gradients, to make a background like this:

Answer 1

You can do a 50/50 background if that's what you mean, using gradient, eg:

background: -webkit-gradient(linear, left top, right top, color-stop(50%,#000000), color-stop(50%,#333));

Or for a full gradient, eg:

-webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#000ed8)); 

Which is pretty straight forward, you just have to add the start and finish color. Also, I'm saving space above but you should of course use -o-linear-gradient, -ms-linear-gradient, linear-gradient as well if you want to be supported on all browsers).

There are also tools available to help you out:

http://www.colorzilla.com/gradient-editor/

Answer 2

You can use the RGB colors in order to choose one specific color:

background-color:rgb(255,255,255)

and playing with the values. you can also use color codes:

background-color:#FF0F00

That is how you can reach a specific color (which is combined from two different ones). I don't know of any ways to nest them.

If you would like to read more about the subject you can read about it here: http://www.w3schools.com/cssref/css_colors.asp

Good luck :)