एक पारदर्शी से एक अपारदर्शी रंग

Question

चीयर्स से एक पाठ पर एक सीएसएस ढाल कैसे लागू करें!

मैं सीएसएस/एचटीएमएल में नौसिखिया हूं, लेकिन मैं नीचे की छवि पर एक पाठ पर ढाल लागू करना चाहता हूं। मैं इसे सीएसएस के साथ कैसे कार्यान्वित कर सकता हूं?

---

Answer 1

इस उदाहरण का प्रयास करें: http://jsbin.com/iwepas/3/ (फ़ायरफ़ॉक्स 18 पर परीक्षण)

प्रासंगिक सीएसएस <article> आवरण मैं इस्तेमाल किया

article { 
    position: relative; 
} 

article:after { 
    position: absolute; 
    bottom: 0; 
    height: 100%; 
    width: 100%; 
    content: ""; 
    background: linear-gradient(to top, 
    rgba(255,255,255, 1) 20%, 
    rgba(255,255,255, 0) 80% 
); 
    pointer-events: none; /* so the text is still selectable */ 
} 

आउटपुट के pseudoelement :after पर है

---

---

कृपया ध्यान दें: पुराने ब्राउज़र पर आप उपयोग करना पड़ सकता एक से पारदर्शी करने के लिए अपारदर्शी pseudoelement जबकि अन्य ब्राउज़र की जरूरत विक्रेता उपसर्गों पर लागू png पृष्ठभूमि linear-gradient

Answer 2

के लिए

CSS3 टेक्स्ट ग्रेडियेंट जो केवल क्रोम और सफारी जैसे वेबकिट आधारित ब्राउज़र द्वारा समर्थित है। मैंने 3 अलग-अलग तरीकों का उपयोग किया है। जांच इस बेला पहले http://jsfiddle.net/sarfarazdesigner/pvU7r/ इस

.article{ 
    background: -webkit-linear-gradient(#eee, #333); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

इस क्रोम में ठीक काम कर रहा है पता नहीं कैसे अन्य ब्राउज़र प्रतिक्रिया की कोशिश करो। http://css-tricks.com/snippets/css/gradient-text/