पृष्ठभूमि छवि

Question

पर आधारित पाठ उलटा क्या सीएसएस/CSS3 या जावास्क्रिप्ट के साथ ऐसा कुछ प्राप्त करना भी संभव है? लेकिन पाठ के लिए कोई छवि नहीं है।

Answer 1

पुराने ब्राउज़र से सीमित समर्थन के साथ

, आप पाठ कतरन के साथ इस लक्ष्य को हासिल कर सकते हैं:

<div class="filter"> 
<div class="base">SOME TEXT</div> 
</div> 

कि सीएसएस के साथ

:

.filter { 
    width: 250px; 
    height: 250px; 
    background: -webkit-linear-gradient(-45deg, black 0%,black 50%,white 51%,white 100%); 
} 
.base { 
    width: 100%; 
    height: 100%; 
    font-size: 80px; 
    background: -webkit-linear-gradient(-45deg, white 0%,white 50%,black 51%,black 100%); 
    -webkit-background-clip: text; 
    color: transparent; 
} 

आप पृष्ठभूमि मिल जाएगा

इस एचटीएमएल के लिए

आधार से (जिसमें पहले div के उलटा रंग हैं) केवल पाठ के माध्यम से दिखाने के लिए।

webkit demo

संपादन

पाया है कि यह एक भी तत्व में किया जा सकता। शैली होगी:

.base { 
    width: 100%; 
    height: 100%; 
    font-size: 80px; 
    background: -webkit-linear-gradient(-45deg, white 0%,white 50%,black 51%,black 100%), -webkit-linear-gradient(-45deg, black 0%,black 50%,white 51%,white 100%); 
    -webkit-background-clip: text, border; 
    color: transparent; 
} 

Answer 2

इस सीएसएस में आप ढ़ाल का उपयोग करने की आवश्यकता होगी प्राप्त करने के लिए। पृष्ठभूमि के लिए एक और पाठ के लिए एक, ढाल स्थिर रहेगा। उन्हें पैदा करने के लिए यह देखें: http://www.colorzilla.com/gradient-editor/ इस निर्माण करने के लिए:

background: #000000; /* Old browsers */ 
background: -moz-linear-gradient(-45deg, #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(-45deg, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(-45deg, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(-45deg, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* IE10+ */ 
background: linear-gradient(135deg, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 

मुख्य समस्या यह है कि आप अभी भी सामना करना पड़ता है आदेश पाठ रंग विपरीत बनाने के लिए पृष्ठभूमि छवि "का पता लगाने" करने में सक्षम नहीं किया जा रहा है।

आप पृष्ठभूमि आप वेबकिट -webkit-पृष्ठभूमि समग्र जो समग्र प्रभाव

आशा इस में मदद करता है के लिए एक XOR और प्लस-गहरा और प्लस-हल्का है इस पर गौर कर सकता है पता लगाने के लिए चाहते हैं तो।