இன்று பிரபலமான வலைத்தளங்களைப் பாருங்கள் மற்றும் நீங்கள் பார்க்கிறீர்கள் என்று ஒரு வடிவமைப்பு சிகிச்சை பெரிய, திரை-விரிவான பின்னணி படங்கள். பதிலளிக்க வலை வடிவமைப்பு என்று அழைக்கப்படும் ஒரு அணுகுமுறை - இந்த படங்களை சேர்ப்பது சவால்களை வலைத்தளங்களில் வெவ்வேறு திரை அளவுகள் மற்றும் சாதனங்கள் பதிலளிக்க வேண்டும் என்று சிறந்த நடைமுறையில் இருந்து வருகிறது.
உங்கள் வலைத்தளத்தின் தளவமைப்பு மாறுபட்ட திரை அளவுகளுடன் மாற்றங்கள் மற்றும் செதில்கள் என்பதால், இந்த பின்னணி படங்கள் அதற்கேற்ப தங்கள் அளவை அளவிடுகின்றன. உண்மையில், இந்த "திரவ படங்கள்" பதிலளிக்க வலைத்தளங்களின் முக்கிய துண்டுகள் ஒன்றாகும் (திரவ கட்டம் மற்றும் ஊடக கேள்விகளுடன் சேர்த்து). அந்த மூன்று துண்டுகள் தொடக்கத்தில் இருந்து பதிலளிக்க வலை வடிவமைப்பு ஒரு பிரதான இருந்தது, ஆனால் எப்போதும் ஒரு தளத்தில் பதிலளிக்க இன்லைன் படங்களை சேர்க்க மிகவும் எளிதாக இருந்தது போது (இன்லைன் படங்களை HTML மார்க் பகுதியாக குறியிடப்படும் என்று கிராபிக்ஸ் உள்ளன), செய்து பின்னணி படங்களை (CSS பின்னணி பண்புகள் பயன்படுத்தி பக்கம் பாணியில் இது) நீண்ட பல வலை வடிவமைப்பாளர்கள் மற்றும் முன் இறுதியில் டெவலப்பர்கள் ஒரு குறிப்பிடத்தக்க சவால் வழங்கப்படுகிறது. அதிர்ஷ்டவசமாக, CSS இல் "பின்னணி அளவு" சொத்துக்களின் கூடுதலானது இது சாத்தியமானது.
ஒரு தனிப்பட்ட கட்டுரையில், நான் எப்படி CSS3 சொத்து பயன்படுத்த வேண்டும் பின்னணி அளவு ஒரு சாளரத்தில் பொருந்தும் படங்களை நீட்டி, ஆனால் இந்த சொத்து பயன்படுத்த இன்னும் சிறந்த, இன்னும் பயனுள்ள வழி உள்ளது. இதைச் செய்வதற்கு, பின்வரும் சொத்து மற்றும் மதிப்பை நாம் பயன்படுத்துவோம்:
பின்னணி-அளவு: கவர்;
தி கவர் சாளரத்தை பொருத்துவதற்கு, சாளரத்தை எவ்வளவு பெரிய அல்லது சிறியதாக இருந்தாலும், பொருந்தக்கூடிய படத்தை அளவிட உலாவிக்கு சொல் சொற்களாகும். படத்தை முழு திரையில் மறைப்பதற்கு அளவுகோல் உள்ளது, ஆனால் அசல் விகிதாச்சாரமும் விகித விகிதமும் அப்படியே வைக்கப்படுகின்றன, இதனால் படத்தை சிதைக்கப்படுவதைத் தடுக்கிறது. முழு சாளர மேற்பரப்பு மூடப்பட்டிருக்கும் வகையில் சாளரத்தை முடிந்தவரை சாளரத்தில் வைக்கப்படுகிறது. இதன் பொருள் உங்கள் பக்கத்தில் அல்லது எந்த விலகலிலும் எந்த வெற்று புள்ளிகளையும் நீங்கள் கொண்டிருக்க மாட்டீர்கள் என்று அர்த்தம், ஆனால் இது சில படத்தின் தோற்ற விகிதத்தையும் கேள்விக்குரிய படத்தையும் சார்ந்து இருப்பதைக் குறிக்கிறது. உதாரணமாக, பின்னணி-நிலை சொத்துக்காக நீங்கள் எந்த மதிப்பைப் பயன்படுத்துகிறீர்கள் என்பதைப் பொறுத்து, ஒரு படத்தின் முனைகள் (மேல், கீழ், இடது அல்லது வலது பக்கம்) துண்டிக்கப்படலாம். பின்னணி "மேல் இடது" என்று நீங்கள் கருதினால், படத்தின் எந்த அளவுகளும் கீழேயும் வலது பக்கங்களிலும் இருந்து வரும். நீங்கள் பின்னணி படத்தை மையமாக இருந்தால், அதிகப்படியான அனைத்து பக்கங்களிலும் இருந்து வரும், ஆனால் அந்த அதிகப்படியான பரவுகிறது என்பதால், எந்த ஒரு பக்கத்திலும் ஏற்படும் பாதிப்பு குறைவான சேவையாக இருக்கும்.
எப்படி உபயோகிப்பது பின்னணி-அளவு: கவர்;
உங்கள் பின்னணி படத்தை உருவாக்கும் போது, அது மிகவும் பெரிய ஒரு படத்தை உருவாக்க ஒரு நல்ல யோசனை. உலாவிகளில் காட்சி தரத்தில் குறிப்பிடத்தக்க தாக்கத்தை ஏற்படுத்தாமல் ஒரு படத்தை சிறியதாக மாற்றும் போது, ஒரு உலாவி அதன் அசல் பரிமாணங்களைக் காட்டிலும் பெரிய அளவுக்கு ஒரு படத்தை அளவிடும்போது, காட்சி தரமானது சீரழிந்து, பளபளப்பான மற்றும் பிக்ஸலேட் ஆனது. இதற்கு எதிர்மறையானது, எல்லா பக்கங்களிலும் பெரிய படங்களை வழங்கும்போது உங்கள் பக்கம் செயல்திறன் வெற்றிபெறுகிறது. இதைச் செய்யும்போது, பதிவிறக்க வேகத்துக்கும் வலை விநியோகத்திற்கும் அந்த படங்களை தயார் செய்யுங்கள். இறுதியில், நீங்கள் ஒரு பெரிய போதுமான பட அளவு மற்றும் தரம் மற்றும் பதிவிறக்க வேகம் ஒரு நியாயமான கோப்பு அளவு இடையே மகிழ்ச்சியான நடுத்தர கண்டுபிடிக்க வேண்டும்.
அளவிடுதல் பின்புலத் படங்களைப் பயன்படுத்துவதற்கான பொதுவான வழிகளில் ஒன்றாகும், அந்தப் பக்கத்தின் முழு பின்னணியை எடுத்துக் கொள்ள வேண்டும், அந்த பக்கம் பரவலாகவும் டெஸ்க்டாப் கம்ப்யூட்டரிடமிருந்தோ அல்லது சிறியதாகவோ காணப்படுவதோடு கைபேசியில் அனுப்பப்படும். சாதனங்கள்.
உங்கள் வலை ஹோஸ்ட்டில் உங்கள் படத்தை பதிவேற்றவும் மற்றும் பின்னணி படத்தை உங்கள் CSS அதை சேர்க்க:
பின்னணி-படம்: url (fireworks-over-wdw.jpg);பின்னணி-மீண்டும்: இல்லை மீண்டும்;பின்னணி நிலை: மைய மையம்;பின்னணி-இணைப்பு: நிலையான;
உலாவி முன்னொட்டுள்ள CSS ஐச் சேர்:
-வெப்கிட் பின்னணி-அளவு: கவர்;-moz-background-size: cover;-ஓ-பின்னணி-அளவு: கவர்;
பின்னர் CSS சொத்து சேர்க்க:
பின்னணி-அளவு: கவர்;
வெவ்வேறு சாதனங்களை பொருத்து வெவ்வேறு படங்களைப் பயன்படுத்துதல்
டெஸ்க்டாப் அல்லது மடிக்கணினி அனுபவத்திற்கான பதிலளிக்க வடிவமைப்பு முக்கியமானது என்றாலும், இணையத்தை அணுகக்கூடிய பல்வேறு சாதனங்கள் கணிசமாக வளர்ந்துள்ளன, மேலும் அதிக அளவிலான திரை அளவுகளில் அது வருகிறது.
முன்னர் குறிப்பிட்டுள்ளபடி, ஒரு ஸ்மார்ட்போனில் மிகப்பெரிய பதிலளிக்கக்கூடிய பின்னணி படத்தை ஏற்றுகிறது, எடுத்துக்காட்டாக, ஒரு திறமையான அல்லது அலைவரிசை-உணர்வு வடிவமைப்பு அல்ல.
மீடியா வினவல்களை எப்படி பயன்படுத்துவது என்பதைப் பொருத்தமாக இருக்கும் படங்களைப் பயன்படுத்துவதற்கு நீங்கள் எவ்வாறு பயன்படுத்த முடியும் என்பதை அறியவும், மேலும் மொபைல் சாதனங்களுடன் உங்கள் வலைத்தளத்தின் பொருந்தக்கூடிய தன்மையை மேலும் மேம்படுத்தவும்.
