CSS3 अस्पष्टताको बारेमा जान्नुहोस्

तपाईंको पृष्ठभूमि पारदर्शी बनाउँदै

एउटा चीज जुन तपाईं सजिलैसँग मुद्रण डिजाइनमा गर्न सक्नुहुन्छ तर वेबमा छवि वा रंगीन पृष्ठभूमिमा ओभरले टेक्स्ट छ र त्यस छविको पारदर्शिता परिवर्तन गर्नुहोस् जुन पाठ पृष्ठभूमिमा फर्काउँछ। तर त्यहाँ CSS3 मा एक सम्पत्ति छ जुन तपाईले आफ्नो तत्वहरूको अस्पष्टता परिवर्तन गर्न अनुमति दिनेछ ताकि तिनीहरू बाहिर र बाहिर निस्कन्छ: अस्पष्टता।

अस्पष्ट गुण कसरी प्रयोग गर्ने

अस्पष्टता सम्पत्ति 0.0 देखि 1.0 सम्म पारदर्शिता राशि को एक मान लाग्छ।

0.0 100% पारदर्शी छ - यस तत्वले तल केहि पनि पूर्ण रूपमा देखाउनेछ। 1.0 होईन 100% अपारदर्शी - तत्वको तल केहि पनि नतिजा देखाइने छ।

त्यसैले एक तत्व 50% पारदर्शी सेट गर्न, तपाईंले लेख्नुभयो:

अस्पष्टता: 0.5;

कार्यमा अस्पष्टताको केही उदाहरणहरू हेर्नुहोस्

पुरानो ब्राउजरमा परीक्षण गर्न निश्चित हुनुहोस्

न त IE 6 न त 7 CSS3 अपरदर्शिता सम्पत्तीको समर्थन गर्दछ। तर तपाईं भाग्यबाट बाहिर हुनुहुन्न। यसको सट्टा, IE ले Microsoft-only सम्पत्ति अल्फा फिल्टरलाई समर्थन गर्दछ। IE मा अल्फा फिल्टरहरू 0 (पूर्णतया पारदर्शी) बाट 100 (पूर्ण रूपमा अल्पविराम) मानहरू स्वीकार गर्छन्। त्यसैले, तपाईंको पारदर्शिता IE मा प्राप्त गर्न, तपाईंले 100 सम्म आफ्नो अस्पष्टता गुणा र तपाईंको शैलीमा अल्फा फिल्टर थप्नु पर्छ:

फिल्टर: अल्फा (अस्पष्टता = 50);

कार्यमा अल्फा फिल्टर हेर्नुहोस् (आईई मात्र)

र ब्राउजर उपसर्गहरूको प्रयोग गर्नुहोस्

तपाईले -moz- र -webkit- उपसर्गहरूको प्रयोग गर्नु पर्छ ताकि मोजिला र वेबकिट ब्राउजरहरूको पुरानो संस्करणहरूले यसलाई पनि समर्थन गर्दछ:

-webkit-opacity: 0.5;
-मोज-अस्पष्टता: 0.5;
अस्पष्टता: 0.5;

सधैं ब्राउजर उपसर्गहरू राख्नुहोस्, र अन्तिम CSS3 गुण अन्तिम।

पुरानो मोजिला र वेबकिट ब्राउजरहरूमा ब्राउजर उपसर्गहरू परीक्षण गर्नुहोस्।

तपाईं छविहरू पारदर्शी बनाउन सक्नुहुन्छ

छविमा अस्पष्टता सेट गर्नुहोस् र यो पृष्ठभूमिमा फर्काउनु हुनेछ। यो पृष्ठभूमि तस्विरहरूको लागि साँच्चै उपयोगी छ।

र यदि तपाई एंकर ट्यागमा थप्नुभयो भने तपाईले होभर प्रभावहरू छविको अस्पष्टता परिवर्तन गरेर मात्र सिर्जना गर्न सक्नुहुन्छ।

a: होवर img {
फिल्टर: अल्फा (अस्पष्टता = 50)
फिल्टर: progid: DXImageTransform.Microsoft.Alpha (अस्पष्टता = 50)
-मोज-अस्पष्टता: 0.5;
-webkit-opacity: 0.5;
अस्पष्टता: 0.5;
}

यो HTML लाई असर गर्दछ:

उपरोक्त शैलीहरू र HTML मा कार्य परीक्षण गर्नुहोस्।

तपाईंको छविमा पाठ राख्नुहोस्

अस्पष्टता संग, तपाईं एक छवि मा पाठ राख्न सक्नुहुन्छ र छवि छ कि त्यो पाठ कहाँ फीका बाहिर देखा पर्दछ।

यो प्रविधि एकदम कम छ, किनभने तपाईं छविलाई सजिलो पार्न सक्नुहुन्न, किनकि यो सम्पूर्ण छवि मेटिनेछ। र तपाइँ पाठ बाकस फीड गर्न सक्नुहुन्न, किनभने पाठ त्यहाँ पनि फ्याक्नेछ।

1. पहिले तपाईं एक कंटेनर DIV सिर्जना गर्नुहोस् र तपाईंको छवि भित्र भित्र राख्नुहोस्:

   
   

2. खाली छविको साथ छविको अनुसरण गर्नुहोस् - यो तपाईं पारदर्शी बनाउनुहुन्छ।

   
   
   

3. तपाईंले आफ्नो एचटीएमएलमा थप्नु भएको अन्तिम कुरा DIV हो यो तपाईंको पाठको साथ:

   
   
   
   यो मेरो कुत्ता शास्टा हो। के त्यो सुन्दर छैन!

4. तपाईँले यसलाई चित्रणको साथमा राख्नुभयो, छवि माथिको पाठ राख्नको लागि। मैले मेरो पाठ बायाँ छेउमा राखें, तर तपाईले दुई बायाँ परिवर्तन गरेर दाँयामा राख्न सक्नुहुन्छ: 0; दायाँका गुणहरू: 0; ।

   #image {
   स्थिति: सापेक्ष;
   चौडाई: 170px;
   उचाई: 128px;
   मार्जिन: 0;
   }
   #text {
   स्थिति: पूर्ण;
   top: 0;
   बायाँ: 0;
   चौडाई: 60px;
   उचाई: 118px;
   पृष्ठभूमि: #fff;
   padding: 5px;
   }
   #text {
   फिल्टर: अल्फा (अस्पष्टता = 70);
   फिल्टर: progid: DXImageTransform.Microsoft.Alpha (अस्पष्टता = 70);
   -मोज-अस्पष्टता: 0.70;
   अस्पष्टता: 0.7;
   }
   #words {
   स्थिति: पूर्ण;
   top: 0;
   बायाँ: 0;
   चौडाई: 60px;
   उचाई: 118px;
   पृष्ठभूमि: पारदर्शी;
   padding: 5px;
   }

यो कसरी हेर्दै हेर्नुहोस्