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

CSS உடன் நுட்பத்தை இயக்கவும்

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

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

தொடங்குதல்

பின்னணி படங்கள் அல்லது வாட்டர்மார்க்ஸ் (உண்மையில் மிகவும் ஒளி பின்னணி படங்கள் இது) அச்சிடப்பட்ட வடிவமைப்பு ஒரு வரலாறு உண்டு. ஆவணங்கள் நீண்ட காலமாக அவற்றை நகலெடுக்கப்படுவதைத் தடுக்க, நீரைக் கொண்டிருக்கும். கூடுதலாக, பல ஃபிளையர்கள் மற்றும் பிரசுரங்கள் அச்சிடப்பட்ட துண்டு வடிவமைப்பு பகுதியாக பெரிய பின்னணி படங்களை பயன்படுத்த. வலை வடிவமைப்பு நீண்ட அச்சிடப்பட்ட வடிவங்களில் இருந்து வருகிறது மற்றும் பின்னணி படங்கள் இந்த கடன் பாணிகளில் ஒன்றாகும்.

இந்த பெரிய பின்னணி படங்களை பின்வரும் மூன்று CSS பாணி பண்புகளை பயன்படுத்தி உருவாக்க எளிதானது:

• பின்னணி-படத்தை
• பின்னணி-மீண்டும்
• பின்னணி-இணைப்பு
• பின்னணி அளவு

பின்னணி-பட

உங்கள் வாட்டர்மார்க் எனப் பயன்படுத்தப்படும் படத்தை வரையறுக்க பின்னணி-படத்தை நீங்கள் பயன்படுத்துவீர்கள். இந்த பாணியை நீங்கள் உங்கள் தளத்தில் உள்ள ஒரு படத்தை ஏற்றுவதற்கு ஒரு கோப்பு பாதையை பயன்படுத்துகிறது, இது "படங்கள்" என்ற அடைவில் இருக்கும்.

பின்னணி-படம்: url (/images/page-background.jpg);

படமானது ஒரு சாதாரண படத்தை விட இலகுவாக அல்லது வெளிப்படையானது என்பது முக்கியம். இது வலைப்பக்கத்தின் உரை, கிராபிக்ஸ் மற்றும் பிற முக்கிய கூறுகளுக்கு பின்னால் ஒரு அரை-வெளிப்படையான படம் என்பது "வாட்டர்மார்க்" தோற்றத்தை உருவாக்கும். இந்த படி இல்லாமல், பின்புல படம் உங்கள் பக்கத்தில் உள்ள தகவலுடன் போட்டியிடும் மற்றும் படிக்க கடினமாக இருக்கும்.

அடோப் ஃபோட்டோஷாப் போன்ற எடிட்டிங் திட்டத்தில் நீங்கள் பின்னணி படத்தை சரிசெய்ய முடியும்.

பின்னணி-மீண்டும் மீண்டும்

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

பின்னணி-மீண்டும்: இல்லை மீண்டும்;

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

பின்னணி-இணைப்பு

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

இந்த சொத்துக்கான முன்னிருப்பு மதிப்பு "சுருள்." பின்னணி-இணைப்பு மதிப்பை நீங்கள் குறிப்பிடவில்லை என்றால், பக்கத்தின் மற்ற பகுதிகளுடன் பின்னணி உருண்டுவிடும்.

பின்னணி-இணைப்பு: நிலையான;

பின்னணி சைஸ்

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

பின்னணி-அளவு: கவர்;

நீங்கள் இந்த சொத்துக்காக பயன்படுத்தக்கூடிய இரண்டு பயனுள்ள மதிப்புகள் பின்வருமாறு:

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

உங்கள் பக்கத்திற்கு CSS சேர்த்தல்

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

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

<பாணி>
உடல் {
பின்னணி-படம்: url (/images/page-background.jpg);
பின்னணி-மீண்டும்: இல்லை மீண்டும்;
பின்னணி-இணைப்பு: நிலையான;
பின்னணி-அளவு: கவர்;
}
// ->

உங்கள் தளத்திற்கு பொருத்தமான குறிப்பிட்ட கோப்புப்பெயர் மற்றும் கோப்பு பாதையை பொருத்து உங்கள் பின்னணி படத்தை URL ஐ மாற்றவும். உங்களின் வடிவமைப்புக்கு ஏற்றவாறு வேறு பொருத்தமான மாற்றங்களை உருவாக்கவும், நீங்களும் ஒரு வாட்டர்மார்க் வேண்டும்.

நீங்கள் நிலையை குறிப்பிடவும் முடியும்

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

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

பின்னணி-நிலை: மையம்;