ब्राउज़र मोबाइल के लिए रैखिक ढाल और यूआरएल-छवि?

Question

मैं पृष्ठभूमि के रूप में एक छवि और यह भी एक सीएसएस रेखीय ग्रेडिएंट करना चाहते हैं:

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

मैं डेस्कटॉप ब्राउज़र की समस्याएँ (फ़ायरफ़ॉक्स 44.x, आईई 10, क्रोम, सफारी) dont'have, लेकिन नहीं करता है ' मोबाइल ब्राउज़र के साथ काम नहीं करता (मैंने सफारी, ऐप फ़ायरफ़ॉक्स, ऐप क्रोम के साथ अपने आईफोन 5, (9 .x) के साथ परीक्षण किया।

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; 

समस्या क्या है:

मैं इस का उपयोग करें?

धन्यवाद एक बहुत और के लिए मेरी अंग्रेजी :)

Answer 1

CSS3 के एकाधिक पृष्ठभूमि के शुरुआती दिनों में, समस्या यह थी कि ढाल पृष्ठभूमि img की जगह लेता है, लेकिन चीजों को हल हो और mozilla-developer में आप कर सकते हैं खेद अपने विचार की तरह एक उदाहरण पाएं जो ठीक काम करता है, मोबाइल भी।
आपका सीएसएस ठीक दिखता है, हालांकि आप इसे उपसर्ग अपडेट करने के लिए थ्रूग ऑटोप्रिफ़िक्सर चला सकते हैं।
और इस संभावना के बारे में सोचने से पहले कि शायद उपसर्गों में से एक आपके प्रदर्शन को परेशान करता है, पहले अपने फोन के साथ कामकाजी उदाहरण (और निश्चित रूप से सीएसएस) की जांच करें और पृष्ठभूमि-छवि के लिए पृष्ठभूमि-दोहराएं और पृष्ठभूमि-स्थिति सेट करें।

Answer 2

jsfiddle लिंक के नीचे जांचें। https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient:

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

https://jsfiddle.net/3u2Lhx6k/

अधिक विस्तृत जानकारी (इस मामले दिशा के लिए उपयोग कर 'के लिए ...' में): मेरे उदाहरण पर, गैर पहले से जुड़ा हुआ रेखीय-ढाल पिछले Syntaxis को सही किया गया है।