Можно ли применить несколько цветов фона с помощью CSS3?

Я знаю, как указать несколько фоновых изображений с помощью CSS3 и изменить способ их отображения с использованием разных параметров.

В настоящее время у меня есть <div>, который должен иметь другой цвет примерно на 30% от ширины в левой части:

div#content {background: url("./gray.png") repeat-y, white; background-size: 30%;}

Вместо того, чтобы загружать полностью серое изображение, как я могу это сделать, указывая цвет, и без дополнительных <div> s?

Ответ 1

Вы действительно не можете - цвета фона применимы к полностью фон элемента. Сохраняет их просто.

Вы можете определить градиент CSS с четкими границами цвета для фона, например.

background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white);

Но лишь немногие браузеры поддерживают это на данный момент. См. http://jsfiddle.net/UES6U/2/

(см. также http://www.webkit.org/blog/1424/css3-gradients/ для объяснения градиентов CSS3, включая острый цветовой трюк.)

Ответ 2

Да, это возможно! и вы можете использовать столько цветов и изображений, сколько хотите, вот правильный путь:

body{
/* Its, very important to set the background repeat to: no-repeat */
background-repeat:no-repeat; 

background-image:  
/* 1) An image              */ url(http://lorempixel.com/640/100/nature/JesusIsLord), 
/* 2) Gradient              */ linear-gradient(to right, RGB(0, 0, 0), RGB(255, 255, 255)), 
/* 3) Color(using gradient) */ linear-gradient(to right, RGB(110, 175, 233), RGB(110, 175, 233));

background-position:
/* 1) Image position        */ 0 0, 
/* 2) Gradient position     */ 0 100px,
/* 3) Color position        */ 0 130px;

background-size:  
/* 1) Image size            */ 640px 100px,
/* 2) Gradient size         */ 100% 30px, 
/* 3) Color size            */ 100% 30px;
}

Ответ 3

Вы можете использовать только один цвет, но столько изображений, сколько хотите, вот формат:

background: [ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>

или background: url(image1.png) center bottom no-repeat, url(image2.png) left top no-repeat;

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

Формат от http://www.css3.info/preview/multiple-backgrounds/

Ответ 4

В этом LIVE DEMO я достиг этого, используя :before css, который, кажется, работает очень хорошо.

.myDiv  {
position: relative; /*Parent MUST be relative*/
z-index: 9;
background: green;
    
/*Set width/height of the div in 'parent'*/    
width:100px;
height:100px;
}


.myDiv:before {
content: "";
position: absolute;/*set 'child' to be absolute*/
z-index: -1; /*Make this lower so text appears in front*/
   
    
/*You can choose to align it left, right, top or bottom here*/
top: 0; 
right:0;
bottom: 60%;
left: 0;
    
    
background: red;
}

<div class="myDiv">this is my div with multiple colours. It work with text too!</div>

Ответ 5

Если кому-то нужен фон CSS с разными повторяющимися горизонтальными полосами цвета, вот как мне удалось это сделать:

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
}

.css-stripes {
  margin: 0 auto;
  width: 200px;
  padding: 100px;
  text-align: center;
  /* For browsers that do not support gradients */
  background-color: #F691FF;
  /* Safari 5.1 to 6.0 */
  background: -webkit-repeating-linear-gradient(#F691FF, #EC72A8);
  /* Opera 11.1 to 12.0 */
  background: -o-repeating-linear-gradient(#F691FF, #EC72A8);
  /* Firefox 3.6 to 15 */
  background: -moz-repeating-linear-gradient(#F691FF, #EC72A8);
  /* Standard syntax */
  background-image: repeating-linear-gradient(to top, #F691FF, #EC72A8);
  background-size: 1px 2px;
}

<div class="css-stripes">Hello World!</div>

Ответ 6

Вы можете использовать столько цветов и изображений, сколько пожелаете.

Обратите внимание, что приоритет, с которым визуализируются фоновые изображения, - FILO, первое указанное изображение находится на верхнем слое, последнее указанное изображение находится на нижнем уровне (см. фрагмент).

#composition {
    width: 400px;
    height: 200px;
    background-image:
        linear-gradient(to right, #FF0000, #FF0000), /* gradient 1 as solid color */
        linear-gradient(to right, #00FF00, #00FF00), /* gradient 2 as solid color */
        linear-gradient(to right, #0000FF, #0000FF), /* gradient 3 as solid color */
        url('http://lorempixel.com/400/200/'); /* image */
    background-repeat: no-repeat; /* same as no-repeat, no-repeat, no-repeat */
    background-position:
        0 0, /* gradient 1 */
        20px 0, /* gradient 2 */
        40px 0, /* gradient 3 */
        0 0; /* image position */
    background-size:
        30px 30px,
        30px 30px,
        30px 30px,
        100% 100%;
}

<div id="composition">
</div>