CSS பின்னணி வெளிப்படைத்தன்மை. CSS கொண்டு வெளிப்படையான பின்னணி அல்லது உரை

CSS3 வலை வடிவமைப்பாளர்கள் வருகையுடன் பல வழிகளில் வேலை எளிதானது மற்றும் அதிக தருக்க மாறிவிட்டது: அனைத்து பிறகு, நீங்கள் இப்போது உண்மையில் நெகிழ்வோடு எந்த பொருள் மிகக் குறைவாகப் ஜாவா ஈடுபடுகிறார்கள் தனிப்பயனாக்கலாம். நீங்கள் பின்னணி வெளிப்படைத்தன்மை சரிசெய்ய வேண்டும் என்று வைத்துக்கொள்வோம் - CSS ஐ உடனடியாக பல விருப்பங்கள் வழங்குகிறது.

கற்பிதங்களின் தொகுப்பின் வரையறுக்கப்படுகிறது பின்னணி (பின்னணி-படத்தை, பின்னணி நிலை , பின்னணி அளவு, பின்னணியில், மீண்டும், பின்னணி-இணைப்பு, பின்னணி-தோற்றம், பின்னணி-கிளிப், பின்னணி வண்ண), தனித்தனியாக பரிந்துரைக்கப்படும் போடலாம் அல்லது பண்பு கீழ் இணைக்க இவை ஒவ்வொன்றும் பின்னணி. எங்களுக்கு விரிவாக அவர்களில் ஒவ்வொரு ஆராய்வோம்.

பின்னணி வண்ண பண்புக்கூற்றைத்

CSS இல், பின்னணி நிறம் ஹெக்ஸ் குறியீடு, நிறம் பெயர் அல்லது ஆர்ஜிபி-நுழைவு பயன்படுத்தி: பல வழிகளில் அமைக்க முடியும். CSS3 உள்ள பதிலாக RGBA கொண்டு ஆர்ஜிபி-பதிவு விருப்பத்தை பயன்படுத்த வைக்க முடிந்தது.

பின்னணி வண்ண: # FFDAB9 ஹெக்ஸ் வண்ணக் குறியீடு பின்னல் பிறகு சொத்து பதிவு செய்யப்பட்டுள்ளது. இந்த நுழைவு எழுத்துக்கள் அதே ஜோடிகள் இருந்தால், குறியீடு பொதுவாக ஒரு சிறிய வெட்டு உள்ளது: # ccff00 # cf0 பின்வருமாறு எழுதலாம்:

உடல் {பின்னணி-நிறம்: # cf0 ;}.

பெயர் கூட மிகவும் கவர்ச்சியான வண்ணங்களில் உள்ளது. உதாரணமாக, நிலையான சிவப்பு மற்றும் நீங்கள் NavajoWhite (#FFDEAD) அல்லது Honeydew2 (# E0EEE0) பயன்படுத்த முடியும் வெள்ளை கூடுதலாக:

உடல் {பின்னணி-நிறம்: ஊதா; }.

இரண்டாவது விருப்பத்தைத் ஆர்ஜிபி அல்லது RGBA நுழைவு நீங்கள் மட்டுமே நிறம் ஆனால் மேலும் CSS பின்னணி வெளிப்படைத்தன்மை குறிப்பிட அனுமதிக்கிறது, ஆனால் முறை மட்டுமே 9 விட பழைய IE பதிப்புகள் வேலை. மற்ற உலாவிகளில் வெளிப்படைத்தன்மை சாதாரண பதிப்பு அங்கீகரிக்க. W3C தரநிலைகளை படி அது பதிலாக அதிக வழக்கமான ஆர்ஜிபி இன்னும் rgba பயன்படுத்த விரும்பத்தக்கதாக உள்ளது.

RGBA பின்னணியில் கடந்த மதிப்பு மற்றும் 1 (வெற்று) 0 (வெளிப்படையான) இருந்து ஒளிர்வு அமைக்கிறது.

சில அசாதாரண மதிப்புகள் உள்ளன. பின்னணி நிறம் ஆனது மற்றும் HSLA பயன்படுத்தி அமைக்க முடியும். இருவரும் CSS3 சேர்க்கப்படும் இருந்தது, அதனால் அவை IE பதிப்பு 9 அல்லது அதிகமாகவும், ஒத்துப்போகாது. ஆவலினால் ஒரே ஆர்ஜிபி அல்லது RGBA மட்டும் வேறு வடிவமைப்பில்: ஹ்யூயே (நிழல் - வண்ண சக்கரத்தில் மதிப்பு, டிகிரி கொடுக்கப்பட்டுள்ளது), நிரம்பிவிடும் (செறிவூட்டல் - 0 முதல் 100 சதவீதத்தில் நிறம் தீவிரம்), லைட்னெஸ் (எடை குறைந்த - பிரகாசம், இதேபோல் அளவிடப்படுகிறது நிரம்பிவிடும் அளவுருக்களில் ).

பின்னணி-படத்தை பண்புக்கூற்றைத்

வெளிப்படையான பின்னணி மிகவும் குறுக்கு உலாவி பதிப்பு - இந்த படத்தை பயன்படுத்துவது ஆகும். CSS3, நீங்கள் இன்னும் படங்களை அமைக்க முடியும், இந்த ஒரு கமா மூலம் செய்யப்படுகிறது. உதாரணம்:

{பின்னணி உடல் படத்தை: இணைய முகவரிக்கு (bg1.png), இணைய முகவரிக்கு (bg2.png)}.

IE8 ஆனது கூட ஆதரவு இந்த வழி. அமைப்பை பயன்படுத்தப்படும் ரப்பர் பின்னணியில் பல படங்கள். முக்கியமாக, பயனர்கள் வெறுமனே ஒரு படத்தை பதிவேற்ற முடியும் எந்த படத்தை பயன்படுத்த மற்றும் CSS பின்னணி நிறம் அமைக்க மறக்க வேண்டாம்.

பின்னணி நிலை பண்புக்கூறு

நீங்கள் பின்னணி அலகு அமைக்க படத்தை பயன்படுத்தினால், CSS நீங்கள் திரையில் எங்கும் படத்தை நிலைப்படுத்த அனுமதிக்கிறது. இயல்பாக, படத்தை மேல் இடது மூலையில் அமைந்துள்ளது. கற்பிதம் வாய்மொழி வழிமுறைகளை ஒன்று (மேல், கீழ், இடது வலது), எண்ணியல் (வட்டி, பிக்சல்கள் மற்றும் பிற அலகுகள்) எடுக்கிறது. இந்த வழக்கில், நீங்கள் இரண்டு மதிப்புகள், கிடைமட்ட மற்றும் செங்குத்து குறிப்பிட வேண்டும்:

உடல் {பின்னணி நிலை: வலது சென்டர் ;} - இந்த உதாரணத்தில், முறை பக்கம், அதே படத்தை தூரத்தில் மேல் மற்றும் கீழ் வலது பக்கத்தில் அமைந்துள்ள.

பின்னணி அளவு பண்புக்கூறு

சில நேரங்களில் அது CSS பின்னணி நீட்டி அல்லது அதன் அளவு குறைக்க வேண்டும். இதை செய்ய, பண்பு பின்னணி அளவு, மற்றும் பின்னணி முடியும் பிக்சல்கள் அல்லது சதவீதங்கள் அமைக்கப்படலாம் அளவு, மற்றும் வேறு எந்த யூனிட்களைப் பயன்படுத்தின.

இந்த பண்புடன், சில சிக்கல்கள் உள்ளன: உலாவி முன்னொட்டுகளைக் முந்தைய பதிப்புகளில் பின்னணியில் சரியான காட்சி பயன்படுத்தப்படுவது. நிச்சயமாக, தற்போதைய பதிப்பு முழுமையாய் இந்த பண்பு ஆதரிக்கிறது மற்றும் குறிப்பிட்ட பண்புகளை தேவை காணாமல்.

பின்னணி-இணைப்பு பண்புக்கூற்றைத்

இந்த பண்பு உருட்டு போது பின்னணி படங்களை நடத்தை குறிப்பிடுகிறது. எனவே, அது 3 மதிப்புகள் (சுதந்தரிக்கிறார்கள், இந்த கட்டுரையில் விவாதிக்கப்படுகிறது பண்புகளை அனைத்து மொத்த சேர்க்காமல்) எடுக்க முடியும்:

• நிலையான - நிலையான பின்னணியில் மீது படம் ஆக்குகிறது;
• உருட்டும் - கூறுகள் மீதமுள்ள பின்னணி உருட்டுதல்;
• உள்ளூர் - ஸ்க்ரோலிங் உள்ளடக்கம் இருந்தால் பின்னணியில் படத்தை அமல். சட்ட உள்ளடக்கங்களை அப்பாற்பட்ட என்று பின்னணி சரி செய்யப்பட்டது.

பயன்படுத்த உதாரணம்:

உடல் {பின்னணி-இணைப்பு நிலையான}.

தற்போது, பயர்பாக்ஸ் கடந்த சொத்து (உள்ளூர்) ஆதரிக்கவில்லை.

பின்னணி-தோற்றம் பண்புக்கூற்றைத்

இந்த பண்பு நிலைப்படுத்தல் உறுப்பு பொறுப்பு. ஆரம்ப உலாவிகளில் முன்னொட்டுகளை தேவைப்படாது. சொத்து தன்னை மூன்று காரணிகள் உள்ளன:

• கணக்கில் சட்ட தடிமன் எடுக்கும் போது திணிப்பு பாக்ஸ், விளிம்பில் முறை தொடர்புடைய அமைப்பைக் உள்ளது;
• எல்லை பாக்ஸ் பண்புகள் எல்லை வரி இருக்க முடியும் என்று முந்தைய வேறுபட்டது முழுமையாகவோ அல்லது பகுதியாகவோ முறை ஒன்றுடன் ஒன்று;
• உள்ளடக்கம் பெட்டியில் பொருத்துதல் படத்தை அதன் உள்ளடக்கம் pryavyazyvaya.

நீங்கள் பல மதிப்புகள் குறிப்பிட்டால், பின்னர் உலாவிகளில் தங்கள் சொந்த வழியில் செயல்பட முடியும்: Firefox மற்றும் Opera முதல் விருப்பத்தை உணர.

பின்னணி-மீண்டும் பண்புக்கூற்றைத்

ஒரு விதியாக, பின்னணி படத்தை குறிப்பிடப்படவில்லை என்றால், அது கிடைமட்டமாக அல்லது செங்குத்தாக மீண்டும் மீண்டும் வேண்டும். இதற்காக மற்றும் பண்பு பின்னணி-மீண்டும் பயன்படுத்தப்படும். இவ்வாறு, தொகுதி பின்னணி, CSS ஐ போன்ற ஒரு சொத்து கொண்டிருக்கும் பல அளவுருக்கள் ஒன்றாக இருக்க முடியும்

• இல்லை மீண்டும் - படத்தை ஒரு ஒற்றை பதிப்பில் ஒரு பக்கத்தில் தோன்றும்;
• மீண்டும் - பின்னணி x மற்றும் y மீண்டும் மீண்டும்;
• மீண்டும் -x - மட்டுமே கிடைமட்டமாக;
• மீண்டும் மீண்டும்-ஒய் - மட்டுமே செங்குத்தாக;
• விண்வெளி - பின்னணி திரும்ப, ஆனால் பரவெளியானது படங்களுக்கு இடையே நிரப்ப சாத்தியமற்றது என்றால் காலியாக தோன்றும்;
• சுற்று - அது முழு படங்கள் முழுப் பரப்பளவு நிரப்ப இல்லை என்றால் படம், அளவிடப்படும்போது.

பண்புகளை உதாரணம்:

உடல் {பின்னணி-மீண்டும்: பரிந்துரைகள் மீண்டும் மீண்டும்} - ஒத்த பின்னணி-மீண்டும்: மீண்டும் மீண்டும்-ஒய்.

காரணிகள், பிரிக்கப்பட்ட பட்டியல் போது CSS3 உள்ள பல படங்களை மதிப்புகள் குறிப்பிடலாம்.

பின்னணி-கிளிப் பண்புக்கூற்றைத்

இந்த பண்பு (புள்ளியிடப்பட்ட பிரேம்கள் வழக்கில், எ.கா.) எல்லைகளை கீழ் பின்னணி நடத்தை வரையறுக்கிறது:

• பேட்டிங்கின் பாக்ஸ் - பின்னணி தொகுதி உள்துறை காட்டப்படும்;
• எல்லை பாக்ஸ் - படத்தை கட்டமைப்பை கீழ் வருகிறது;
• உள்ளடக்கத்தை பாக்ஸ் - பின்னணியில் படம் மட்டுமே உள்ளடக்கத்தில் தோன்றும்.

பயன்படுத்த உதாரணம்:

உடல் {பின்னணி-கிளிப்: உள்ளடக்கம்- பெட்டியில்;}.

குரோம் மற்றும் சபாரி வெப்கிட்- முன்னொட்டு தேவைப்படுகிறது.

தன்மை பண்புகளை மற்றும் வடிகட்டி

CSS சொத்து அனைத்து உலாவிகளில் வேலை செய்யும் - ஒளிர்வு பண்பு நீங்கள் பின்னணி வெளிப்படைத்தன்மை அமைக்க அனுமதிக்கிறது. மதிப்பு 0.0 முதல் 1.0 உள்ளடக்கிய வரை அமைக்கப்பட்டிருந்தது. இந்த வழக்கில், நீங்கள் CSS பின்னணி வெளிப்படைத்தன்மை அமைக்க முடியும் பதிலாக 0.3 எந்த முழு எண் மதிப்பு .3 எழுத போதும்:

.block {பின்னணி-படத்தை: இணைய முகவரிக்கு ( img.png); ஒளிர்வு: .3;}.

பின்னணி ஒளிர்வு அமைக்க, CSS கூட ஒன்பதாவது பதிப்பு கீழே ஐஇ ஏற்றது வடிகட்டி பண்பு பயன்படுத்துகின்றன:

.block {பின்னணி-படத்தை: இணைய முகவரிக்கு ( img.png); வடிகட்டி: ஆல்பா (ஒளிர்வு = 30)}.

ஒளிர்வு பயன்படுத்தி தெளிவான மட்டுமே பின்னணி போது, ஆனால் அலகு உள்ளே அனைத்து கூறுகளையும்: இந்த வழக்கில், ஒளிர்வு மதிப்பு ஒளிர்வு RGBA பரம்பரை வழியாக வெவ்வேறு வெளிப்படைத்தன்மை அமைப்புகளை காரணம் என்று இடையே 0 மற்றும் 100 குறிப்பு அமைக்கப்படுகிறது.

சிஐஎஸ் உலாவிகளில் மற்றும் பிற அனைத்து நாடுகளுக்குத் பயன்பாட்டு புள்ளிவிவரங்களையும் எப்போதும் தொடர்ந்து கண்காணிப்போம். அனைத்து டி.டி.பி. மிகப்பெரிய பிரச்சனை - IE இன் பழைய பதிப்புகள், அவர்கள் நீங்கள் முழு அளவிற்கு CSS3 பயன்படுத்த அனுமதிக்க வேண்டாம். அமைப்பை உங்கள் உலாவி எந்த CSS சொத்து ஆதரிக்கிறது என்பதை பார்க்கலாம் என்று சிறப்பு சேவைகளை பயன்படுத்த மறக்க வேண்டாம். நீங்கள் உலாவிகளில் பழைய பதிப்புகள் நிறுவ முடியாது என்றால், பல உலாவிகளில் தளத்தில் வேலையை ஆன்லைனிலேயே பார்க்கலாம் என்று ஒரு சேவை கண்டுபிடிக்க.