विभिन्न छवि पृष्ठभूमि पर पाठ बहुत पठनीय नहीं है


30

मैं यहाँ डिज़ाइन की मदद या सलाह के लिए कोशिश कर रहा हूँ कि कैसे मैं संभवतः निम्नलिखित सुधार कर सकता हूँ:

जैसे शीर्षक कहता है, मैं एक वेबसाइट बैनर लगा रहा हूं जिसमें पृष्ठभूमि के रूप में विभिन्न छवियों पर प्रदर्शित कई पाठ हैं। अब, चूंकि अधिकांश चित्र गहरे हैं, मैंने फ़ॉन्ट रंग को सफेद के रूप में सेट किया है। लेकिन फिर भी, कुछ पाठ कुछ छवियों पर बहुत पठनीय नहीं हैं जैसे:

मानक

जब से मैं CSS के साथ काम कर रहा हूं, मैंने विभिन्न विकल्पों की कोशिश की है जैसे:

पाठ छाया जोड़ना:

पाठ छाया के साथ

सीएसएस:

text-shadow: 3px 3px 0px #000;

पाठ के चारों ओर एक अर्ध-पारदर्शी बॉक्स बनाने की भी कोशिश की:

अर्ध-पारदर्शी पृष्ठभूमि के साथ

डेमो

मुझे लगता है बॉक्स एक जगह से बाहर दिखता है।

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

पुनश्च: यदि आप इसे बेहतर तरीके से खड़ा करने में मदद करेंगे तो आप एक अलग फ़ॉन्ट का उपयोग करने की सलाह भी दे सकते हैं।


4
आपके पाठ पर एक नरम काली बाहरी चमक (सभी दिशाओं में छाया) कभी-कभी इसे देखने के बिना पर्याप्त विपरीत देने के लिए पर्याप्त हो सकती है जैसे आपने इसके पीछे कुछ भी डाला है।
जॉन

@ जॉन मैं चमक के बारे में भी सोचता था, लेकिन बहुत अधिक चमक प्रभाव के बिना, पठनीय पाठ की समस्या बनी हुई है और जब से मैं एक कॉर्पोरेट वेबसाइट पर काम कर रहा हूं, मैंने इसे हड़ताल करने का फैसला किया क्योंकि यह अव्यवसायिक दिखेगी। सुझाव के लिए धन्यवाद!
AyB

2
जोर देना चाहिए था कि मैं कितनी सूक्ष्म बात कर रहा था। 20-30% और व्यापक प्रसार की तरह जहां आप शायद ही इसे नोटिस करेंगे। यदि यह एक चमक की तरह दिखता है, या आप एक संक्रमण देख सकते हैं - यह बहुत अंधेरा है। इसके चारों ओर की छवि बनाने के लिए बस इतना ही प्रयोग करें कि यह थोड़ा गहरे रंग की हो जाए जहाँ यह अक्षर से मिलती है।
जॉन

@ जॉन हम्म दिलचस्प लगता है, मैं इसे भी एक कोशिश करूँगा।
अय्यूब

जवाबों:


22

पहले से ही महान जवाब के विकल्प के रूप में, पाठ के पीछे 50% अस्पष्टता के साथ एक काली डिव को जोड़ने के बारे में कैसे?

यहां छवि विवरण दर्ज करें

यह फ़ॉन्ट को मूल रूप से किसी भी छवि पर भी काम करने की अनुमति देगा।

div {
    position:absolute;
    top:250px;
    left:140px;
    width:500px;
    height:50px;
    background-color:black;
    z-index:0;
    opacity:0.5;
}

उदाहरण


@ICanHasCheezburger कोई समस्या नहीं है! मुझे उसी समस्या का सामना करना पड़ रहा है, जो कि बैनर छवियों जैसे वेबसाइट का काम कर रही है और मुझे यह सबसे सुखद लग रहा है कि इसके चारों ओर देखने का सबसे अच्छा तरीका है क्योंकि यह ज्यादातर समय अच्छा काम करता है।
शनिवार १४:१४ को

17

मैं फ़ॉन्ट को बोल्ड बनाने का सुझाव देता हूं (केवल वजन में बदलाव, न कि स्वयं फ़ॉन्ट) और छाया का सम्मान करता हूं ताकि यह अक्षरों के सभी किनारों को परिभाषित करे:

उदाहरण 1

font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000;

आप एक निश्चित रूपरेखा बनाने के साथ-साथ एक धब्बा बनाने के लिए एक से अधिक पाठ-छाया को भी जोड़ सकते हैं :

उदाहरण 2

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;

अपना समय देने के लिए धन्यवाद! मैंने आपके text-shadowद्वारा SaturnsEye के समाधान के साथ दिए गए उपयोग की योजना बनाई है ।
AyB

@ मैं नहीं कर सकता क्योंकि आपने ऐसा नहीं किया था। "इसके अलावा, पाठ के चारों ओर एक अर्ध-पारदर्शी बॉक्स बनाने की कोशिश की गई। मुझे लगता है कि बॉक्स एक जगह से बाहर दिखता है।" लेकिन आपकी साइट, आपकी कॉल ...
एंड्रयू लेच

यह सच है, लेकिन SaturnsEye के समाधान को देखने के बाद मुझे एहसास हुआ कि आकार और रंग बदलने पर यह अच्छा लग रहा था। शब्दों के गलत चुनाव के लिए क्षमा करें। शायद मुझे अगली बार बेहतर तरीके से समझाना चाहिए।
AyB

3

इसे एक काले पारदर्शी पृष्ठभूमि और कुछ पैडिंग दें

पृष्ठभूमि-रंग: rgba (0,0,0,0.5);

गद्दी: 0.5em;

बस उन नंबरों के साथ थोड़ा इधर-उधर हो जाएं लेकिन यह आपको एक उपयोगी परिणाम दे सकता है।


आपके समय के लिए धन्यवाद! मुझे एहसास हुआ कि अगर आपके पास एक ऐसा मामला है जहां आंतरिक तत्व को बाहरी में एक अलग अपारदर्शिता की आवश्यकता होती है, तो opacityसंपत्ति इस मामले में मदद नहीं करेगी , जबकि background-colorसंपत्ति में अस्पष्टता सेट करना काम करता है। यहाँ की
AyB
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.