Блог

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

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

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

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

Градиент — это достаточно простой способ сделать это с помощью 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.

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

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

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

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