2016-03-03 20 views
8

Tôi muốn có một hình ảnh làm nền và cũng một gradient tuyến tính CSS:Độ dốc tuyến tính và url-hình ảnh cho trình duyệt di động?

background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); 

tôi dont'have vấn đề với trình duyệt máy tính để bàn (Firefox 44.x; IE 10; Chrome; Safari), nhưng doesn' t làm việc với trình duyệt di động (tôi đã thử nghiệm với iPhone 5 của tôi, (9.x) với safari, ứng dụng firefox, ứng dụng chrome).

tôi sử dụng này:

background-image: url("/site/grigliatrasparente.png"), -moz-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); 
background-image: url("/site/grigliatrasparente.png"), -webkit-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); 
background-image: url("/site/grigliatrasparente.png"), -o-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); 
background-image: url("/site/grigliatrasparente.png"), -ms-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); 
background-image: url("/site/grigliatrasparente.png"), -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#404040), color-stop(2%,#dfbb80),color-stop(98%,#dfbb80),color-stop(100%,#404040)); 
background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); 
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#404040, endColorstr=#dfbb80); 
background-color: #dfbb80; 

vấn đề là gì?

Cảm ơn rất nhiều và xin lỗi vì tiếng anh của tôi :)

Trả lời

3

Trong những ngày đầu của nhiều nền CSS3, vấn đề là gradient mất vị trí của img nền, nhưng mọi thứ được giải quyết và tại mozilla-developer bạn có thể tìm một ví dụ như ý tưởng của bạn hoạt động tốt, cũng là thiết bị di động.
css của bạn có vẻ tốt, mặc dù bạn có thể chạy nó throug autoprefixr để có được các tiền tố được cập nhật.
Và trước khi suy nghĩ về khả năng có thể một trong các tiền tố làm phiền màn hình của bạn, FIRST kiểm tra với điện thoại của bạn ví dụ hoạt động (và tất nhiên là css) và đặt nền lặp lại và vị trí nền cho hình nền.

1

Kiểm tra bên dưới liên kết jsfiddle. Trên ví dụ của tôi, không tiền tố tuyến tính gradient đã được sửa chữa để các syntaxis cuối cùng: (trong trường hợp này sử dụng 'để ...' để chỉ đạo)

background-image: url(http://placehold.it/350x150), linear-gradient(to right, #404040 0%, #dfbb80 2%, #dfbb80 98%, #404040 100%); 

https://jsfiddle.net/3u2Lhx6k/

thông tin chi tiết hơn: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient.

Các vấn đề liên quan