படங்களை CSS பயன்படுத்தி

பாணியில் உங்கள் படங்கள் மற்றும் படங்களைப் பயன்படுத்துக

பலர் உரை, வண்ணம், அளவு மற்றும் பலவற்றை மாற்றுவதற்கு CSS ஐப் பயன்படுத்துகின்றனர். ஆனால் பல மக்கள் அடிக்கடி மறந்து விடுகின்ற ஒரு விஷயம், நீங்கள் படங்களைப் பயன்படுத்தி CSS ஐயும் பயன்படுத்தலாம்.

படத்தை மாற்றுதல்

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

• படங்களை சுற்றி ஒரு எல்லை அல்லது சுருக்கத்தைச் சேர்க்கவும்
• இணைக்கப்பட்ட படங்களை சுற்றி வண்ண எல்லை அகற்ற
• படங்களின் அகலம் மற்றும் / அல்லது உயரத்தை சரிசெய்தல்
• ஒரு துளி நிழல் சேர்க்கவும்
• படத்தை சுழற்று
• படத்தில் இருக்கும் போது பாணிகளை மாற்றவும்

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

img {
எல்லை: 1px திட கருப்பு;
திணிப்பு: 5px;
}

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

img> a {
எல்லை: எதுவும் இல்லை;
}

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

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

img {
அகலம்: 50%;
உயரம்: கார்;
}

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

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

பின்புலங்களாக படங்கள் பயன்படுத்தப்படுகின்றன

CSS எளிதாக உங்கள் படங்களை கொண்டு ஆடம்பரமான பின்னணியில் உருவாக்க செய்கிறது.

நீங்கள் முழு பக்கத்திற்கு அல்லது ஒரு குறிப்பிட்ட உறுப்புக்கு பின்னணியை சேர்க்கலாம். பின்னணி படத்தை சொத்துடன் பக்கத்தின் பின்னணி படத்தை உருவாக்க எளிது:

உடல் {
பின்னணி-படம்: url (background.jpg);
}

ஒரு உறுப்பு மீது பின்னணி வைக்க பக்கம் ஒரு குறிப்பிட்ட உறுப்பு செய்ய உடல் தேர்வுக்குழு மாற்ற.

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

பின்னணி-மீண்டும் எழுதவும்: repeat-x; பட கிடைமட்டமாக மற்றும் பின்னணி-மீண்டும் மீண்டும் ஓடு: மீண்டும்-யா; செங்குத்தாக ஓடு. பின்புல பின்னணி சொத்துடன் உங்கள் பின்னணி படத்தை வைக்கலாம்.

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

HTML5 உடை படங்கள் உதவுகிறது

HTML5 இல் FIGURE உறுப்பு ஆவணத்தில் தனியாக நிற்கக்கூடிய எந்த படங்களையும் வைக்க வேண்டும். அதைப் பற்றி சிந்திக்க ஒரு வழி படத்தை ஒரு பின்தளத்தில் காணலாம் என்றால், அது FIGURE உறுப்பு உள்ளே இருக்க வேண்டும். நீங்கள் உங்கள் உறுப்புகளுக்கு பாணியை சேர்க்க அந்த உறுப்பு மற்றும் FIGCAPTION உறுப்பு பயன்படுத்தலாம்.