Tôi có thể áp dụng nhiều màu nền với CSS3?

Question

Tôi biết cách chỉ định nhiều hình nền bằng CSS3 và sửa đổi cách chúng được hiển thị bằng các tùy chọn khác nhau.

Hiện nay tôi có một <div>, mà cần phải có một màu khác nhau cho khoảng 30% chiều rộng ở phía bên trái:

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

Thay vì tải hình ảnh đó là hoàn toàn màu xám, làm thế nào tôi có thể làm điều này chỉ định màu sắc và không có thêm <div> s?

Answer 1

Bạn không thể thực sự - màu nền áp dụng cho toàn bộ nền yếu tố. Giúp họ đơn giản.

Bạn có thể xác định một dốc CSS với đường viền màu sắc sắc nét cho nền thay thế, ví dụ:

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

Nhưng chỉ một vài trình duyệt hỗ trợ tại thời điểm này. Xem http://jsfiddle.net/UES6U/2/

(. Xem thêm http://www.webkit.org/blog/1424/css3-gradients/ cho một gradient giải thích CSS3, bao gồm ranh giới màu lừa sắc nét)

Answer 2

Bạn chỉ có thể sử dụng một màu nhưng như nhiều hình ảnh như bạn muốn, đây là định dạng:

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>

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

Nếu bạn cần thêm màu, hãy tạo một hình ảnh có màu đồng nhất và sử dụng nó. Tôi biết nó không phải là những gì bạn muốn nghe, nhưng tôi hy vọng nó sẽ giúp.

Định dạng là từ http://www.css3.info/preview/multiple-backgrounds/

Answer 3

Có thể thực hiện được! và bạn có thể sử dụng nhiều màu sắc và hình ảnh như bạn mong muốn, đây là đúng cách:

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

Trong LIVE DEMO này tôi đã đạt được điều này bằng cách sử dụng bộ chọn :before css mà dường như để làm việc khá độc đáo.

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

Tôi nghĩ tôi sẽ thêm này như tôi cảm thấy nó có thể làm việc khá tốt cho một thanh tỷ lệ phần trăm/mức hình ảnh của một cái gì đó.

Nó cũng có nghĩa bạn không tạo ra nhiều divs nếu bạn không phải, và giữ trang này up-to-date

Answer 5

Trong trường hợp ai đó cần một nền CSS với màu sắc khác nhau lặp đi lặp lại sọc ngang, đây là cách tôi quản lý để đạt được điều này:

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

Bạn có thể sử dụng nhiều màu sắc và hình ảnh tùy thích. Vui lòng lưu ý rằng mức độ ưu tiên mà hình nền được hiển thị là FILO, hình ảnh được chỉ định đầu tiên nằm trên lớp trên cùng, hình ảnh được chỉ định cuối cùng nằm ở lớp dưới cùng (xem đoạn mã).

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