gradient nền với màu đồng nhất

Question

Tôi phải làm như sau: Phần trên cùng của div là một hình ảnh của một gradient, sau đó ở phía dưới nó tiếp tục như một màu đồng nhất. Tôi có thể làm điều này với CSS đơn giản không? Tôi biết những điều sau không hợp lệ.

{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px; 

Lưu ý: người đầu tiên 225px, mà hình ảnh lấp đầy, nên nếu không có sự background-color

Answer 1

Theo như tôi biết, bạn cần phải sử dụng một gradient cho màu sắc rắn, do đó bạn có thể đặt nó một cách chính xác.

CSS sẽ là:

.imgbg { 
    width:255px; 
    height:355px; 
    background: url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8); 
    background-position: 0px 0px, 0px 112px; 
    background-repeat: no-repeat, no-repeat; 
    background-size: 255px 112px, 255px 233px; 
} 

Dưới đây là your updated fiddle

suport cơ bản cần sử dụng tốt cho các trình duyệt hỗ trợ nhiều nền tảng, vấn đề duy nhất là với IE < = 8. nền Gradient có thể là một vấn đề với IE9, nhưng tôi nghĩ rằng nó sẽ làm việc (tôi không thể kiểm tra IE9). Nếu nó thực sự là một vấn đề, hãy xem colozilla để sửa chữa.

Answer 2

tôi sẽ làm như sau:

#myDiv { background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ; }

này sẽ chỉ đặt nền của bạn hình ảnh trên đầu trang của div; phần còn lại của nó, sẽ là màu bạn đã chọn cho toàn bộ nền của div.

Answer 3

Kiểm tra câu đố này và cho tôi biết nếu đây là những gì bạn muốn.

FIDDLE

HTML

<div class="imgbg"></div> 

CSS

.imgbg { 
    width:255px; 
    height:355px; 
    background:#f7d8e8 url('http://placehold.it/255x255') no-repeat; 
}