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

Question

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

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

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

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

Answer 1

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

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/John3-16/), 
/* 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;
}

Answer 2

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

Вместо этого вы можете определить 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-градиентов, включая трюк с четкой цветовой границей.)

Answer 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/

Answer 4

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

.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's with text too!</div>

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

Это также означает, что вы не создаете несколько div-ов, если вам это не нужно, и поддерживает актуальность этой страницы

Answer 5

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

Обратите внимание, что приоритет, с которым отображаются фоновые изображения, - это 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>

Answer 6

Если кому-то нужен 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>

JSfiddle