如何应用多个背景颜色到一个div [英] How can apply multiple background color to one div

问题描述

我有一些场景，我应该使用多个背景颜色到一个div。这对我来说更好，而不是使用背景图片或额外的div。但是，我找不到更容易的方法来使用CSS。所以，我需要帮助一些情况。请参见图片：

（1）我要建立A。因为我写了：

  div.A {background：linear-gradient（to right，＃9c9e9f，＃f6f6f6）; } 
  

但是，写完代码后，它会像B。但是，我想要完全像A。所以，通过css / css3我该怎么做（不添加更多的div）？

（2）是否可以使一个部分比其他部分小？例如，在C处，蓝色比其他部分小（高度）。如何，我可以应用多个背景颜色到一个div，使一个部分更小像C（不添加额外的div到C）？

更新：
@ Mohammad的回答后，我试过这样。但是，对于C情景，我不能减少蓝色部分的高度。你能请，告诉我我该怎么办吗？

jsfiddle.net/mFjQ6

解决方案

A div实际上可以不含：before 或：之后选择器，但使用线性渐变作为您的第一次尝试。唯一的区别是你必须指定4个位置。深灰色从0到50％和ligth灰色从50％到100％像这样：

 背景：linear-右，＃9c9e9f 0％，＃9c9e9f 50％，＃f6f6f6 50％，＃f6f6f6 100％）; 
 

如你所知，B div是由具有2个位置的线性渐变制成的，如下：

  background：linear-gradient（向右，＃9c9e9f 0％，＃f6f6f6 100％）; 
 

对于C div，我使用与div A相同的渐变i ike this：

  background：linear-gradient（向右，＃9c9e9f 0％，＃9c9e9f 50％，＃33ccff 50％，＃33ccff 100％ ;但是这次我使用：之后 
 
 
 
 
选中此 jsfiddle 完整的跨浏览器代码。
 
 
 
 
 
 
还有一个C div的替代方法，白色背景隐藏第二部分的一部分。 
相反，我们使第二部分是透明的，并且使用：after 选择器作为具有所需位置和大小的彩色背景。 
查看此 jsfiddle 此更新解决方案。
 
I've some scenario where I should use multiple background color to one div. It's better for me rather than using background images or additional div. But, I can't find easier way to use it by CSS. So, I need help about some scenario. Please, see the image:



(1) I want to build "A". for that I wrote:
div.A { background: linear-gradient(to right, #9c9e9f, #f6f6f6); }
But, after writing that code, it'll like "B". But, I want exactly like "A". So, by css/css3 how can I do it(without adding more divs)?

(2) Is it possible to make one portion smaller than other portion? For example, at "C", blue color is smaller(at height) than the other portion. How, can I apply multiple background color to one div with making one portion smaller like "C"(without adding additional divs to "C")?

Update:
After @Mohammad's answer, I've tried with that way. But, for "C" scenario, I can't decrease the height of blue portion. Can you please, tell me how can I do it? 

jsfiddle.net/mFjQ6
解决方案
The A div can actually be made without :before or :after selector but using linear gradient as your first try. The only difference is that you must specify 4 positions. Dark grey from 0 to 50% and ligth grey from 50% to 100% like this:
background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);
As you know, B div is made from a linear gradient having 2 positions like this:
background: linear-gradient(to right,  #9c9e9f 0%,#f6f6f6 100%);
For the C div, i use the same kind of gradient as div A ike this:
background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);
But this time i used the :after selector with a white background like if the second part of your div was smaller.

Check this jsfiddle for complete cross-browser code.



There is also an alternative for the C div without using a white background to hide the a part of the second section.
Instead, we make the second part transparent and we use the :after selector to act as a colored background with the desired position and size.
See this jsfiddle for this updated solution.

                        
这篇关于如何应用多个背景颜色到一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！