Czy mogę zastosować wiele kolorów tła za pomocą CSS3?

Question

Wiem, jak określić wiele obrazów tła za pomocą CSS3 i zmodyfikować sposób ich wyświetlania przy użyciu różnych opcji.

Obecnie mam <div>, który musi mieć inny kolor przez około 30% szerokości po lewej stronie:

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

Zamiast ładowania obrazu, który jest całkowicie szary, jak to zrobić to określenie koloru i bez dodatkowych <div> s?

Answer 1

Nie można tak naprawdę - kolory tła dotyczą całkowicie tła elementu. Utrzymuje je w prosty sposób.

Można zdefiniować gradient CSS z ostrymi granicami kolorów dla tła, np.

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

Ale tylko kilka przeglądarek obsługuje to w tej chwili. Zobacz http://jsfiddle.net/UES6U/2/

(. Patrz także http://www.webkit.org/blog/1424/css3-gradients/ jeszcze przez gradienty wyjaśnienie CSS3, w tym ostrą granicą kolor podstęp)

Answer 2

Można użyć tylko jednego koloru, ale jak wiele obrazów, jak chcesz, tutaj jest format:

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>

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

Jeśli potrzebujesz więcej kolorów, zrób zdjęcie jednolitego koloru i użyj go. Wiem, że to nie jest to, co chcesz usłyszeć, ale mam nadzieję, że to pomoże.

Format jest od http://www.css3.info/preview/multiple-backgrounds/

Answer 3

Tak, to możliwe! i można go używać jak najwięcej kolorów i obrazów, jak chcesz, tutaj jest właściwy sposób:

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 4

W tym LIVE DEMO mi się osiągnąć to za pomocą selektora :before css, który wydaje się działać całkiem ładnie.

.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>

myślałem chciałbym dodać to co czuję, to może działać całkiem dobrze za barem odsetek/poziom wizualnej coś.

Oznacza to również, że nie tworzysz wiele div, jeśli nie trzeba, i utrzymuje tę stronę w górę na bieżąco

Answer 5

W przypadku gdy ktoś potrzebuje tła CSS z innym kolorem powtarzając poziome paski, tutaj jest jak udało mi się to osiągnąć:

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

Answer 6

Możesz używać tylu kolorów i obrazów, ile tylko chcesz.

Należy pamiętać, że priorytetem, w którym obrazy tła są renderowane, jest FILO, pierwszy określony obraz znajduje się w górnej warstwie, ostatni określony obraz znajduje się w dolnej warstwie (patrz opis).

#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>