Несколько цветов фона на 1 DIV

Question

У меня есть div, и я хотел бы применить к нему 2 фона по горизонтали, используя CSS3, но я не могу понять это, и поэтому я был бы признателен за любую помощь!

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

Я хочу, чтобы верхняя половина была одного цвета, а нижняя - другого цвета.

Я знаю, что это легко сделать с изображениями, но я просто не могу понять, как это сделать безиспользуя их.

Answer 1

Градиент - это достаточно простой способ сделать это с помощью CSS3 и только один div:

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

Да, я солгал. Это совсем не просто из-за множества префиксных версий разных поставщиков, которые нужно использовать:

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 */
}

Я сгенерировал CSS здесь и удалил свойство filter, так как это приведет к фактическому градиенту в IE6-9.

Answer 2

Другим способом достижения этого, кроме градиентов, является использование псевдоэлемента:

http://jsfiddle.net/kizu/S3LXB/

Добавьте position: relative и некоторые положительные значения z-index к элементу иотрицательный z-index для псевдоэлемента, и он будет помещен поверх фона элемента, но под содержимым элемента.И тогда вы можете расположиться так, как вы хотите.

Этот способ не так гибок, как тот, что с градиентами, но!Вы наверняка можете использовать градиенты для псевдоэлемента и тем самым добиться еще большего эффекта.