CSS पृष्ठभूमि पारदर्शिता। पारदर्शी पृष्ठभूमि वा पाठ CSS संग

CSS3 वेब डिजाइनर को आगमन संग थुप्रै तरिकामा काम सजिलो र थप तार्किक भएको छ: सबै पछि, अब तपाईं साँच्चै flexibly कुनै पनि वस्तु, कम प्राय जाभास्क्रिप्ट resorting अनुकूलन गर्न सक्नुहुन्छ। तपाईँलाई पृष्ठभूमिमा को पारदर्शिता समायोजन गर्न आवश्यक भन्न गरौं - CSS तुरुन्तै धेरै विकल्प प्रदान गर्दछ।

विशेषताहरु को एक सेट द्वारा परिभाषित पृष्ठभूमि (पृष्ठभूमि छवि, पृष्ठभूमि स्थिति , पृष्ठभूमि आकार, पृष्ठभूमि दोहोरो, पृष्ठभूमि संलग्न, पृष्ठभूमि मूल, पृष्ठभूमि क्लिप, पृष्ठभूमि रंग), अलग नियुक्त गर्न सकिँदैन वा संयुक्त प्रत्येक जो को विशेषता अन्तर्गत पृष्ठभूमि। हामीलाई विस्तार तिनीहरूलाई प्रत्येक जाँचौं।

पृष्ठभूमि रंग विशेषता

CSS मा, पृष्ठभूमि रङ एक हेक्स कोड, रंग नाम वा RGB-प्रविष्टि प्रयोग: धेरै तरिकामा सेट गर्न सकिन्छ। CSS3 मा RGBA संग RGB-रेकर्डिङ विकल्प को सट्टा प्रयोग गर्न सम्भव भयो।

पृष्ठभूमि रंग: # FFDAB9 हेक्स रंग कोड जाली पछि सम्पत्ति मा रेकर्ड गरिएको छ। यदि यो प्रविष्टि मा वर्ण एउटै जोडी हो, कोड सामान्यतया सानो कट छ: # ccff00 # cf0 लेखिएको सकिन्छ:

शरीर {पृष्ठभूमि रंग: # cf0 ;}।

नाम पनि सबैभन्दा आकर्षक रंग मा छ। उदाहरणका लागि, मानक रातो र तपाईं नाभाजोवाइट color (#FFDEAD) वा ओसिलोमह 2 color (# E0EEE0) प्रयोग गर्न सक्नुहुन्छ सेतो बाहेक:

शरीर {पृष्ठभूमि रंग: बैजनी; }।

उत्तरार्द्ध विकल्प RGB छ वा RGBA प्रविष्टि मात्र होइन रंग तर पनि CSS पृष्ठभूमि को पारदर्शिता निर्दिष्ट गर्न अनुमति दिन्छ, तर विधि मात्र 9 भन्दा पुरानो अर्थात् संस्करण मा काम गर्छ। अन्य ब्राउजरहरूमा पारदर्शिता संग सामान्य संस्करण पहिचान। को W3C स्तर अनुसार यो अझै बढी सामान्य RGB सट्टा RGBA प्रयोग गर्न बेहतर छ।

RGBA पृष्ठभूमिमा पछिल्लो मूल्य र 0 (पारदर्शी) 1 (अपारदर्शी) अस्पष्टता सेट गर्छ।

त्यहाँ केही असामान्य मान छन्। पृष्ठभूमिमा रंग HSL र HSLA प्रयोग सेट गर्न सकिन्छ। दुवै CSS3 थपिएका थिए, र यसैले अर्थात् संस्करण 9 वा उच्च द्वारा समर्थित छैन। Embodiments मात्र फरक ढाँचामा समान RGB वा RGBA,: ह्यु (छाया - रंग पाङ्ग्रा मा मूल्य, डिग्री दिइएको छ), Saturate (संतृप्ति - प्रतिशतको रूपमा रंग तीव्रता, 0 देखि 100), प्रकाश (प्रकाश - प्यारामिटर Saturate चमक, त्यस्तै मापन )।

पृष्ठभूमि छवि विशेषता

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

{पृष्ठभूमि शरीर छवि: यूआरएल (bg1.png), URL (bg2.png)}।

IE8 पनि समर्थन यस तरिका हो। लेआउट प्रयोग रबर को पृष्ठभूमिमा धेरै तस्बिरहरू। महत्वपूर्ण कुरा, जस्तै प्रयोगकर्ता छवि बस अपलोड गर्न सक्नुहुन्छ, कुनै पनि छवि प्रयोग र CSS मा पृष्ठभूमि रङ सेट गर्न भूल छैन।

पृष्ठभूमि स्थिति विशेषता

तपाईं पृष्ठभूमिमा एकाइ सेट छवि प्रयोग गर्नुहुन्छ भने, CSS तपाईं स्क्रिनमा जहाँसुकै छवि स्थिति गर्न अनुमति दिन्छ। पूर्वनिर्धारित रूपमा, छवि माथिल्लो बायाँ कुनामा स्थित छ। विशेषता मौखिक निर्देशन या त (माथि, तल, बायाँ दायाँ), एक संख्यात्मक (ब्याज पिक्सेल र अन्य एकाइहरु) लिन्छ। यस मामला मा, तपाईं दुई मान, तेर्सो र ठाडो निर्दिष्ट गर्नुपर्छ:

शरीर {पृष्ठभूमि स्थिति: दायाँ केन्द्र ;} - यो उदाहरणमा, पृष्ठ, एउटै तस्बिर दूरी को माथि र तल को सही पक्षमा नमुना स्थित गरिनेछ।

पृष्ठभूमि आकार विशेषता

कहिलेकाहीं यो CSS पृष्ठभूमि सुत्छन् वा यसको आकार घटाउन आवश्यक छ। यो गर्न, विशेषता पृष्ठभूमि आकार, र पृष्ठभूमिमा पिक्सेल वा प्रतिशतको सेट गर्न सक्नुहुन्छ को आकार, र कुनै पनि अन्य एकाइहरु प्रयोग गर्नुहोस्।

यो विशेषता संग, त्यहाँ केही समस्या छन्: ब्राउजर उपसर्गको को पहिले संस्करण मा एक पृष्ठभूमि को सही प्रदर्शन प्रयोग गर्न को लागि। निस्सन्देह, हालको संस्करण पूर्णतया यो विशेषता समर्थन र विशिष्ट गुण को लागि आवश्यकता गायब।

पृष्ठभूमि संलग्न विशेषता

यो विशेषता स्क्रोल गर्दा पृष्ठभूमि छवि को व्यवहार निर्दिष्ट गर्दछ। त्यसैले, यो 3 मानहरू (को वंशानुगतप्राप्तगर्नुहोस्, यस लेखमा छलफल विशेषताहरु को लागि कुल सहित छैन) लिन सक्छ:

• स्थिर - निश्चित पृष्ठभूमि मा तस्विर बनाउँछ;
• स्क्रोल - तत्व बाँकी संग पृष्ठभूमि स्क्रल;
• स्थानीय - स्क्रोलिङ सामग्री छ भने पृष्ठभूमिमा छवि scrolled छ। फ्रेम सामग्रीहरू परे जान्छ कि पृष्ठभूमि निश्चित छ।

प्रयोग उदाहरण:

शरीर {पृष्ठभूमि संलग्न निश्चित}।

हाल, फायरफक्स अन्तिम सम्पत्ति (स्थानीय) समर्थन गर्दैन।

पृष्ठभूमि मूल विशेषता

यो विशेषता स्थिति तत्व लागि जिम्मेवार छ। प्रारम्भिक ब्राउजर उपसर्गको को प्रयोग आवश्यक छ। सम्पत्ति नै तीन मापदण्डहरू छ:

• खातामा फ्रेम को मोटाइ लिइरहेको बेला गद्दी-बक्स, किनारा ढाँचा सापेक्षित अवस्थित छ;
• सीमा बक्स गुण सीमा रेखा हुन सक्छ कि अघिल्लो फरक पूर्ण वा आंशिक रूपमा ढाँचा ओभरल्याप;
• सामग्री-बक्स स्थिति छवि यसको सामग्री pryavyazyvaya।

तपाईं धेरै मान निर्दिष्ट भने ब्राउजर आफ्नै तरिकामा प्रतिक्रिया गर्न सक्नुहुन्छ: फायरफक्स र ओपेरा मात्र पहिलो विकल्प बुझ्ने।

पृष्ठभूमि दोहोरो विशेषता

नियम, पृष्ठभूमिमा छवि निर्दिष्ट गरिएको छ भने, यो तेर्सो वा ठाडो बारम्बार हुनुपर्छ। यस को लागि र विशेषता पृष्ठभूमि दोहोरो प्रयोग। यसरी अवरोध पृष्ठभूमि, यस्तो सम्पत्ति जसमा CSS धेरै मापदण्डहरु को एक हुन सक्छ:

• कुनै दोहोरो - छवि एकल संस्करण मा एक पृष्ठमा देखिन्छ;
• बारम्बार - पृष्ठभूमि एक्स र वाई मा दोहोर्याइएको छ;
• बारम्बार-एक्स - तेर्सो मात्र;
• बारम्बार-वाई - ठाडो मात्र;
• ठाउँ - पृष्ठभूमि दोहोर्याइएको छ, तर ठाउँ चित्रहरु बीच भर्न असम्भव छ भने खाली देखा;
• राउन्ड - यो सारा तस्वीर सम्पूर्ण क्षेत्र भर्नुहोस् गर्दैन यदि छवि, आरोहण छ।

विशेषताहरु को उदाहरण:

शरीर {पृष्ठभूमि दोहोरो: no- दोहोरिने दोहोरिने} - समान पृष्ठभूमि दोहोरो: दोहोर्याउन-वाई।

मापदण्डहरु, अल्पविरामद्वारा विभाजित गरेर सूचीकृत गर्दा CSS3 मा हुन सक्छ धेरै तस्बिरहरू लागि मान निर्दिष्ट गर्नुहोस्।

पृष्ठभूमि क्लिप विशेषता

यो विशेषता (विन्दु फ्रेम को मामला मा, जस्तै) सीमाहरु अन्तर्गत पृष्ठभूमिमा को व्यवहार परिभाषित:

• गद्दी-बक्स - ब्लक को भित्री प्रदर्शित पृष्ठभूमि;
• सीमा बक्स - छवि ढांचे अन्तर्गत आउँछ;
• सामग्री-बक्स - पृष्ठभूमिमा मा तस्विर मात्र सामग्री भित्र प्रदर्शित हुनेछ।

प्रयोग उदाहरण:

शरीर {पृष्ठभूमि क्लिप: content- बक्स;}।

Chrom र सफारी -webkit- उपसर्ग आवश्यक पर्दछ।

अस्पष्टता विशेषताहरु र फिल्टर

CSS सम्पत्ति काम गर्नेछ सबै ब्राउजर - अस्पष्टता विशेषता तपाईं पृष्ठभूमि को पारदर्शिता सेट गर्न अनुमति दिन्छ। मान 0.0 देखि 1.0 समावेशी गर्न दायरामा सेट गरिएको छ। यस मामला मा, तपाईं CSS पृष्ठभूमि को पारदर्शिता सेट गर्न सक्नुहुन्छ 0.3 को सट्टा कुनै पूर्णांक मूल्य .3 लेख्न पर्याप्त छ:

.ब्लक देखि {पृष्ठभूमि छवि: यूआरएल ( img.png); अस्पष्टता: .3;}।

पृष्ठभूमिमा अस्पष्टता सेट गर्न, CSS फिल्टर विशेषता प्रयोग, को लागि पनि नवौं संस्करण तल अर्थात् उपयुक्त छ:

.ब्लक देखि {पृष्ठभूमि छवि: यूआरएल ( img.png); फिल्टर: अल्फा (अस्पष्टता = 30)}।

अस्पष्टता प्रयोग छैनन् स्पष्ट मात्र पृष्ठभूमिमा हुन्छ, तर पनि एकाइ भित्र सबै तत्व गर्दा: यस मामला मा, अस्पष्टता मूल्य अस्पष्टता RGBA उत्तराधिकार मार्फत विभिन्न पारदर्शिता सेटिङहरू विशेषता भनेर बीच 0 र 100 नोट सेट गरिएको छ।

सधैं सीआईएस ब्राउजर र अन्य सबै देशहरूमा लागि आफ्नो प्रयोग तथ्याङ्कहरू निगरानी। सबै DTP को सबै भन्दा ठूलो समस्या - अर्थात् पुरानो संस्करण, तिनीहरूले तपाईंलाई पूर्ण हदसम्म CSS3 प्रयोग गर्न अनुमति छैन। लेआउट मा आफ्नो ब्राउजर कुनै पनि CSS सम्पत्ति समर्थन कि जाँच कि विशेष सेवाहरू प्रयोग गर्न बिर्सनु हुँदैन। तपाईं ब्राउजर को पुरानो संस्करण स्थापना गर्न सक्नुहुन्न भने, धेरै ब्राउजरहरूमा साइट काम अनलाइन जाँच गर्नेछ कि एक सेवा पाउन।