Bạn có thể phủ một gradient css3 trong suốt lên một hình nền không?

Question

Tôi đang cố gắng đặt độ dốc css3 lên trên cùng của hình nền. Sử dụng đoạn code dưới đây đặt một hình nền trên đầu trang của gradient của tôi, nhưng tôi đang cố gắng làm theo cách khác xung quanh, do đó, gradient hoạt động như một mặt nạ trên đầu trang.

url(images/darkwood.png), 
-webkit-gradient(linear, 0 0, 0 100%, from(#EEF), to(#000)) 300px 50px no-repeat, 
-webkit-gradient(linear, 0 0, 0 100%, from(#EFE), to(#000)) 0 0 no-repeat; 
background: 
url(images/darkwood.png), 
-moz-linear-gradient(#EEF, rgba(0,0,0,1)) 300px 50px no-repeat, 
-moz-linear-gradient(#EFE, rgba(0,0,0,1)) 0 0 no-repeat; 

Nhờ sự giúp đỡ của bạn

Answer 1

Tôi có làm điều này cho một trong những trang web của tôi, Hy vọng nó làm việc cho bạn;

body { 
    margin: 0; 
    padding: 0; 
    background: url('img/background.jpg') repeat; 
} 

body:before { 
    content: " "; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%); 
} 

Answer 2

Ví dụ trên sẽ không hoạt động với div có thể chia lại.

Mã của bạn sẽ hoạt động tốt. Nhưng khi tôi hiểu nó, CSS đọc từ phải sang trái. Vì vậy, bạn sẽ phải sử dụng như sau:

div { 
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%), url('http://www.google.co.uk/logos/classicplus.png') repeat; 
} 

Ví dụ: http://sapphion.com/2011/11/css3-background-gradient-on-top-of-an-image/