2010-04-16 14 views
6

मैं क्रॉस ब्राउज़र अस्पष्टता ढाल (रंग ढाल नहीं) कैसे कार्यान्वित कर सकता हूं? कोड निम्न देखें:
क्रॉस ब्राउज़र ओपेसिटी ग्रेडियेंट (रंगीन ग्रेडियेंट नहीं) को कैसे कार्यान्वित करें

<div style="background-color:Red;display:block;height:500px;width:500px;filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=500)"></div> 

यह IE में ठीक काम करता है, लेकिन नहीं फ़ायरफ़ॉक्स जैसे अन्य ब्राउज़रों में, safari..etc। फ़ायरफ़ॉक्स के बराबर वाक्यविन्यास क्या है? कृपया मुझे ढाल छवि का उपयोग करने का सुझाव न दें।

उत्तर

9

हाल ही में फ़ायरफ़ॉक्स संस्करणों के लिए -moz-linear-gradient और वेबकिट ब्राउज़र के लिए -webkit-gradient है। उन दोनों के लिए पारदर्शिता rgba रंगों का उपयोग करके संभव होनी चाहिए।

https://developer.mozilla.org/en/CSS/-moz-linear-gradient
http://developer.apple.com/safari/library/documentation/...

केवल वास्तविक 100% पार ब्राउज़र संगत समाधान हालांकि एक छवि है।

+0

इस उत्तर होने के लिए नमूना सीएसएस लिख रहा हूँ प्रश्न के लिए सही नहीं है। प्राचीन आईई के फ़िल्टर के बराबर प्रतीत नहीं होता है: सीएसएस के माध्यम से मोज़िला या गीको के लिए अल्फा स्टार्ट/फिनिश। – PlayGod

+0

मैं यह पता लगाने की कोशिश कर रहा हूं कि एक क्षैतिज रैखिक ढाल अस्पष्टता रखने के लिए छवि कैसे प्राप्त करें, इसलिए पिछला div का लंबवत ढाल दिखा सकता है। ऐसा इसलिए है क्योंकि मेरे ऐप में, उपयोगकर्ता उस छवि को अपलोड करेगा जिसके लिए अस्पष्टता ढाल की आवश्यकता होती है, इसलिए समाधान शुद्ध सीएसएस/जेएस होना चाहिए। – PlayGod

+0

यह आईई के साथ काम करेगा, लेकिन प्रशिक्षु रूप से आप एक छवि पृष्ठभूमि में एक रैखिक अस्पष्टता ढाल लागू नहीं कर सकते हैं। जब आप आरजीबीए रैखिक ढाल का उपयोग करते हैं तो मोज़ और गीको वास्तव में एक छवि बनाते हैं, और ढाल स्पष्ट रूप से केवल एक दिशा में जा सकता है। प्रभाव के बाद हम बाद में हैं, आपको या तो अस्पष्टता के लिए एक दिशात्मक ढाल निर्दिष्ट करने की क्षमता और रंग ढाल के लिए एक और दिशात्मक ढाल निर्दिष्ट करने की आवश्यकता होगी। – PlayGod

6

धन्यवाद @deceze,

मैं अन्य लोगों को एक ही आवश्यकता

top:0px; 
    opacity: 0.6;  
    width: 1944px; 
    height: 896px; 
    position: absolute; 
    z-index: 500; 
background-color:#dcdcdc; 
     /* For WebKit (Safari, Google Chrome etc) */ 
     background: -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), to(rgba(215,212,207,0))); 
     /* For Mozilla/Gecko (Firefox etc) */ 
     background: -moz-linear-gradient(top, #dcdcdc, rgba(215,212,207,0)); 
     /* For Internet Explorer 5.5 - 7 */ 
     filter:alpha(Opacity=70, FinishOpacity=0, Style=1, StartX=1242, StartY=0, FinishX=1242, FinishY=696); 
     /* For Internet Explorer 8 */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70, FinishOpacity=0, Style=1, StartX=1242, StartY=0, FinishX=1242, FinishY=696)"; 

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^