多个背景颜色1 DIV

本文介绍了多个背景颜色1 DIV的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我有一个 div ，我想使用CSS3水平应用2背景，但我不能弄清楚，所以我会欣赏任何帮助！ 背景：blue top no-repeat 10％; 背景：黄底无重复10％; 我想上半部分是一种颜色，下半部分是不同的颜色。 / p> 我知道它可以很容易地用图像做，但我只是不知道如何做，而不使用它们。 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！