多个背景颜色1 DIV [英] Multiple background colours on 1 DIV

问题描述

我有一个 div ，我想使用CSS3水平应用2背景，但我不能弄清楚，所以我会欣赏任何帮助！

 背景：blue top no-repeat 10％ 
背景：黄底无重复10％; 
  

我想上半部分是一种颜色，下半部分是不同的颜色。 / p>

我知道它可以很容易地用图像做，但我只是不知道如何做，而不使用它们。

< div是一个相当简单的方法，使用CSS3，只有一个 div ：

http://jsfiddle.net/thirtydot/8wH2F/

是的，我撒了谎。这不是很简单，因为无数不同的供应商前缀版本的同一件事，你需要使用：

  div {
 background：＃000fff; / *旧浏览器* / 
 background：-moz-linear-gradient（top，＃000fff 0％，＃000fff 50％，＃ffff00 50％，＃ffff00 100％）; / * FF3.6 + * / 
 background：-webkit-gradient（linear，left top，left bottom，color-stop（0％，＃000fff），color-stop（50％，＃000fff），color - 停止（50％，＃ffff00），停止（100％，＃ffff00））; / * Chrome，Safari4 + * / 
 background：-webkit-linear-gradient（top，＃000fff 0％，＃000fff 50％，＃ffff00 50％，＃ffff00 100％）; / * Chrome10 +，Safari5.1 + * / 
 background：-o-linear-gradient（top，＃000fff 0％，＃000fff 50％，＃ffff00 50％，＃ffff00 100％）; / * Opera11.10 + * / 
 background：-ms-linear-gradient（top，＃000fff 0％，＃000fff 50％，＃ffff00 50％，＃ffff00 100％）; / * IE10 + * / 
 background：linear-gradient（top，＃000fff 0％，＃000fff 50％，＃ffff00 50％，＃ffff00 100％）; / * W3C * / 
} 
  

我生成了CSS 在此处，并删除了过滤器属性，因为它将导致IE6-9中的实际渐变。

I have a div, and I would like to apply 2 backgrounds horizontally onto it using CSS3, but I can't figure it out, and so I would appreciate any help!

    background: blue top no-repeat 10%;
    background: yellow bottom no-repeat 10%;

I want the top half to be one color, and the bottom half to be a different colour.

I know it can be done quite easily with images, but I just can't figure out how to do this without using them.

解决方案

A gradient is a reasonably simple way to do this using CSS3 and only one div:

http://jsfiddle.net/thirtydot/8wH2F/

Yes, I lied. It's not very simple at all due to the myriad different vendor prefixed versions of the same thing that you need to use:

div {
    background: #000fff; /* Old browsers */
    background: -moz-linear-gradient(top, #000fff 0%, #000fff 50%, #ffff00 50%, #ffff00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000fff), color-stop(50%,#000fff), color-stop(50%,#ffff00), color-stop(100%,#ffff00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* IE10+ */
    background: linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* W3C */
}

I generated the CSS here, and removed the filter property since it will result in an actual gradient in IE6-9.

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