सीएसएस का उपयोग करके, क्या आप पाठ पर पृष्ठभूमि में फीका करने के लिए एक ढाल मास्क लागू कर सकते हैं?

Question

मेरे पास एक पूर्ण स्क्रीन निश्चित पृष्ठभूमि छवि है। मैं अपने स्क्रॉलिंग div में पाठ को शीर्ष पर फीका करना चाहूंगा, संभावित रूप से div के शीर्ष भाग पर पृष्ठभूमि में ढाल मास्क लगाने के द्वारा। मुझे टेक्स्ट दिखने में दिलचस्पी है क्योंकि यह उपयोगकर्ता नीचे स्क्रॉल करता है, लेकिन वास्तव में टेक्स्ट पढ़ने के लिए पूर्ण अस्पष्टता का एक बड़ा क्षेत्र है।

मुझे पता है कि वेबकिट में मास्किंग विकल्प हैं, लेकिन मैं से अधिक पेज की पृष्ठभूमि के माध्यम से फीका करने के लिए निहित पाठ केवल तत्व के एक छोटे से हिस्से को ढाल लागू करने के लिए एक रास्ता नहीं मिल रहा।

उम्मीद है कि मैं काफी वर्णनात्मक रहा हूं।

धन्यवाद।

Answer 1

मैं यह वही चीज़ सोच रहा हूं। समाधान वास्तव में काफी सरल है। यद्यपि यह निश्चित रूप से एक आधुनिक CSS3 सुविधा है, इसलिए आप ब्राउज़र संगतता पर फंस गए हैं।

वेबकिट सीएसएस की एक पंक्ति के साथ इस की देखभाल कर सकते हैं:

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))) 

यह एक छवि के रूप में भी इतना का उपयोग किए बिना जो कुछ तत्व यह, पर लागू की गई के नीचे 10% कम हो गए। आप यह सुनिश्चित करने के लिए padding-bottom: 10% जोड़ सकते हैं कि स्क्रॉल करने के लिए और अधिक होने पर सामग्री केवल फीका हो। स्रोत: http://www.webkit.org/blog/181/css-masks/

एक मोज़िला (छिपकली) फ़ॉलबैक हालांकि थोड़ा जटिल काम है: आप its 'mask' feature उपयोग कर सकते हैं, लेकिन यह एक एसवीजी छवि मांग करती है। आप base64 embed that image into your stylesheet की कोशिश कर सकते ...

Answer 2

मान लीजिए कि मैं समझ रहा हूं कि आप सही तरीके से क्या चाहते हैं, आप अपनी छवि के शीर्ष 300ish पिक्सल को डुप्लिकेट कर सकते हैं और फ़ोटोशॉप में एक पारदर्शिता ढाल लागू कर सकते हैं (शीर्ष पूरी तरह से अपारदर्शी और नीचे पूरी तरह पारदर्शी बनाते हैं)।

फिर इस छवि को div या निश्चित छवि के शीर्ष पर तय कुछ अन्य तत्व में रखें लेकिन उच्च z-index के साथ। मुख्य पाठ तब आपकी पृष्ठभूमि पर स्क्रॉल करेगा लेकिन div ओवरले के नीचे और फीका होगा क्योंकि ओवरले स्क्रीन के शीर्ष की ओर अधिक अपारदर्शी हो जाता है।

Answer 3

आप एक ठोस रंग को फीका कर रहे हैं, तो आप एक psudo तत्व का उपयोग कर सकते हैं:

.image-container { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 

 
.image-container:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 55%; 
 
    bottom: 0; 
 
    background: -webkit-linear-gradient(transparent, #FFF) left repeat; 
 
    background: linear-gradient(transparent, #FFF) left repeat; 
 
}

<div class="image-container"> 
 
    <img src="https://photosharingsites.files.wordpress.com/2014/11/tiger-wild-cat-animal-winter-snow-wallpapers-free-backgrounds.jpg?w=474&h=344" alt="don't shoot me"> 
 
    </div>