உடல் பின்னணி படங்கள் எளிதாக முடிந்தது

HTML

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

அது எவ்வாறு செய்யப்படுகிறது?

  1. உங்கள் உள்ளடக்கம் எவ்வளவு அகலமானது என்பதைக் கண்டுபிடிக்கவும். எடுத்துக்காட்டு: 750px.
  2. உங்கள் விளக்கப்பட பயன்பாட்டில் (நான் இல்லஸ்ட்ரேட்டரைப் பயன்படுத்துகிறேன்) உள்ளடக்கப் பகுதியை விட அகலமாக ஒரு படத்தை உருவாக்கவும். எடுத்துக்காட்டு: 800px.
  3. வலைப்பதிவின் ஒவ்வொரு பக்கத்திலும் நீங்கள் விரும்பும் பின்னணிக்கு படத்தின் பின்னணியை அமைக்கவும்.
  4. பின்னணியில் ஒரு வெள்ளை பகுதியை சேர்க்கவும்.
  5. பிராந்தியத்தின் இருபுறமும் வெளியேறும் வெள்ளை பகுதியில் ஒரு நிழலைப் பயன்படுத்துங்கள்.
  6. பயிர் பகுதியை அகலத்தை 1 பிக்சல் உயரத்தில் அமைக்கவும். இது விரைவான ரெண்டரிங் செய்வதற்கு படத்தை அழகாகவும் சுருக்கமாகவும் பதிவிறக்கும்.
  7. படத்தை வெளியிடுங்கள்.

இல்லஸ்ட்ரேட்டரைப் பயன்படுத்தி நான் அதை எவ்வாறு கட்டினேன் என்பது இங்கே (பயிர் பரப்பு எனக்கு மிகவும் உயரமாக உள்ளது என்பதை நினைவில் கொள்க… அதுதான் நான் என்ன செய்கிறேன் என்பதை நீங்கள் காணலாம்):
இல்லஸ்ட்ரேட்டருடன் பின்னணி

பின்னணி படத்துடன் வெளியீடு எவ்வாறு இருக்கும் என்பதற்கான எடுத்துக்காட்டு இங்கே:
பின்னணி படத்தின் எடுத்துக்காட்டு

உங்களுடைய உடல் பாணி குறிச்சொல்லைப் பயன்படுத்தி படத்தை எவ்வாறு பயன்படுத்துவது என்பது இங்கே CSS ஐ கோப்பு.

பின்னணி: # B2B2B2 url ('images / bg.gif') மீண்டும்-ஒய் மையம்;

பின்னணி பாணி குறிச்சொல்லின் ஒரு பிரிவு இங்கே:

  • # B2B2B2 - பக்கத்தின் ஒட்டுமொத்த பின்னணி நிறத்தை அமைக்கிறது. இந்த எடுத்துக்காட்டில், பின்னணி படத்தில் சாம்பல் நிறத்துடன் பொருந்துவது சாம்பல்.
  • url ('images / bg.gif') - நீங்கள் பயன்படுத்த விரும்பும் பின்னணி படத்தை அமைக்கிறது.
  • மீண்டும்-ஒய் - படத்தை y- அச்சில் மீண்டும் செய்ய அமைக்கிறது. எனவே பின்னணி படம் பக்கத்தின் மேலிருந்து கீழாக மீண்டும் வரும்.
  • மையம் - பக்கத்தின் மையத்தில் படத்தை அமைக்கிறது.

நல்ல மற்றும் எளிதானது… ஒரு படம், ஒரு பாணி குறிச்சொல்!

2 கருத்துக்கள்

  1. 1
  2. 2

நீங்கள் என்ன நினைக்கிறீர்கள்?

இந்த தளம் ஸ்பேமைக் குறைக்க Akismet ஐப் பயன்படுத்துகிறது. உங்கள் கருத்துத் தரவு எவ்வாறு செயல்படுத்தப்படுகிறது என்பதை அறியவும்.