രചയിതാവിൽ നിന്ന്:ഹലോ എല്ലാവരും. പശ്ചാത്തല നിറങ്ങളും ചിത്രങ്ങളും വെബ് ഡിസൈനിൽ വലിയ പങ്ക് വഹിക്കുന്നു, കാരണം ഏത് ഘടകങ്ങളും കൂടുതൽ ആകർഷകമായി രൂപകൽപ്പന ചെയ്യാൻ അവ നിങ്ങളെ അനുവദിക്കുന്നു. ഇന്ന് നമ്മൾ HTML-ൽ ഒരു പശ്ചാത്തലം ഉണ്ടാക്കുന്നത് എങ്ങനെയെന്ന് നോക്കാം.

പശ്ചാത്തലം സജ്ജീകരിക്കാൻ HTML ഉപയോഗിക്കാൻ കഴിയുമോ?

ഇല്ല എന്ന് ഞാൻ ഉടനെ പറയും. പൊതുവേ, വെബ് പേജുകൾ രൂപകൽപ്പന ചെയ്യാൻ html സൃഷ്ടിച്ചിട്ടില്ല. ഇത് വളരെ അസൗകര്യമാണ്. ഉദാഹരണത്തിന്, ഒരു bgcolor ആട്രിബ്യൂട്ട് ഉണ്ട്, അത് ഉപയോഗിച്ച് നിങ്ങൾക്ക് പശ്ചാത്തല നിറം സജ്ജമാക്കാൻ കഴിയും, എന്നാൽ ഇത് വളരെ അസൗകര്യമാണ്.

അതനുസരിച്ച്, ഞങ്ങൾ കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ (CSS) ഉപയോഗിക്കും. ഒരു പശ്ചാത്തലം ക്രമീകരിക്കുന്നതിന് കൂടുതൽ അവസരങ്ങളുണ്ട്. ഇന്ന് നമ്മൾ ഏറ്റവും അടിസ്ഥാനപരമായവ നോക്കും.

css ഉപയോഗിച്ച് എങ്ങനെ പശ്ചാത്തലം സെറ്റ് ചെയ്യാം?

അതിനാൽ, ഒന്നാമതായി, ഏത് ഘടകത്തിലേക്കാണ് പശ്ചാത്തലം സജ്ജീകരിക്കേണ്ടതെന്ന് നിങ്ങൾ തീരുമാനിക്കേണ്ടതുണ്ട്. അതായത്, ഞങ്ങൾ ഒരു റൂൾ എഴുതുന്ന ഒരു സെലക്ടറെ കണ്ടെത്തേണ്ടതുണ്ട്. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് മുഴുവൻ പേജിനും മൊത്തത്തിൽ പശ്ചാത്തലം സജ്ജമാക്കണമെങ്കിൽ, ബോഡി സെലക്ടർ വഴിയും എല്ലാ ബ്ലോക്കുകൾക്കും ഡിവി സെലക്ടർ വഴിയും ഇത് ചെയ്യാൻ കഴിയും. നന്നായി, മുതലായവ. പശ്ചാത്തലം മറ്റേതെങ്കിലും സെലക്ടർമാരുമായി ബന്ധിപ്പിച്ചിരിക്കണം: ശൈലി ക്ലാസുകൾ, ഐഡൻ്റിഫയറുകൾ മുതലായവ.

നിങ്ങൾ സെലക്ടറെ തീരുമാനിച്ച ശേഷം, നിങ്ങൾ വസ്തുവിൻ്റെ പേര് തന്നെ എഴുതേണ്ടതുണ്ട്. പശ്ചാത്തല വർണ്ണം സജ്ജീകരിക്കുന്നതിന് (അതായത് ഒരു സോളിഡ് കളർ, ഒരു ഗ്രേഡിയൻ്റോ ചിത്രമോ അല്ല), പശ്ചാത്തല-വർണ്ണ പ്രോപ്പർട്ടി ഉപയോഗിക്കുക. അതിനു ശേഷം നിങ്ങൾ ഒരു കോളൻ ഇടുകയും നിറം തന്നെ എഴുതുകയും വേണം. ഇത് വ്യത്യസ്ത രീതികളിൽ ചെയ്യാം. ഉദാഹരണത്തിന്, കീവേഡുകൾ, ഹെക്സ് കോഡ്, rgb, rgba, hsl ഫോർമാറ്റുകൾ ഉപയോഗിക്കുന്നു. ഏത് രീതിയും ചെയ്യും.

ഏറ്റവും സാധാരണയായി ഉപയോഗിക്കുന്ന രീതി ഹെക്സാഡെസിമൽ കോഡ് ആണ്. നിറങ്ങൾ തിരഞ്ഞെടുക്കുന്നതിന്, നിങ്ങൾക്ക് കളർ കോഡ് പ്രദർശിപ്പിക്കുന്ന ഒരു പ്രോഗ്രാം ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഫോട്ടോഷോപ്പ്, പെയിൻ്റ് അല്ലെങ്കിൽ ചില ഓൺലൈൻ ടൂൾ. അതനുസരിച്ച്, ഒരു ഉദാഹരണമായി, മുഴുവൻ വെബ് പേജിനും ഞാൻ ഒരു പൊതു പശ്ചാത്തലം എഴുതും.

ശരീരം (പശ്ചാത്തല നിറം: #D4E6B3;)

ഈ കോഡ് ഹെഡ് സെക്ഷനിൽ ചേർക്കേണ്ടതുണ്ട്. ഫയലുകൾ ഒരേ ഫോൾഡറിലാണെന്നത് പ്രധാനമാണ്.

പശ്ചാത്തലമായി ചിത്രം

ചിത്രത്തിനായി ഞാൻ ഒരു ചെറിയ html ഭാഷാ ഐക്കൺ ഉപയോഗിക്കും:

ഒരു ഐഡൻ്റിഫയർ ഉപയോഗിച്ച് നമുക്ക് ഒരു ശൂന്യമായ ബ്ലോക്ക് സൃഷ്ടിക്കാം:

< div id = "bg" > < / div >

നമുക്ക് അതിന് വ്യക്തമായ അളവുകളും പശ്ചാത്തലവും നൽകാം:

#bg( വീതി: 400px; ഉയരം: 250px; പശ്ചാത്തല-ചിത്രം: url(html.png); )

#bg( വീതി: 400px; ഉയരം: 250px; പശ്ചാത്തല ചിത്രം: url (html. png);

ഈ കോഡിൽ നിന്ന് ഞാൻ ഒരു പുതിയ പ്രോപ്പർട്ടി ഉപയോഗിച്ചതായി നിങ്ങൾക്ക് കാണാൻ കഴിയും - പശ്ചാത്തല ചിത്രം. ഒരു html ഘടകത്തിലേക്ക് പശ്ചാത്തലമായി ഒരു ചിത്രം ചേർക്കുന്നതിന് ഇത് പ്രത്യേകം ഉദ്ദേശിച്ചുള്ളതാണ്. എന്താണ് സംഭവിച്ചതെന്ന് നമുക്ക് നോക്കാം:

ഒരു ചിത്രം വ്യക്തമാക്കുന്നതിന്, കോളണിന് ശേഷം നിങ്ങൾ കീവേഡ് url എഴുതണം, തുടർന്ന് പരാൻതീസിസിൽ ഫയലിലേക്കുള്ള പാത സൂചിപ്പിക്കണം. ഈ സാഹചര്യത്തിൽ, ചിത്രം html ഡോക്യുമെൻ്റിൻ്റെ അതേ ഫോൾഡറിലാണെന്ന വസ്തുതയെ അടിസ്ഥാനമാക്കിയാണ് പാത്ത് വ്യക്തമാക്കുന്നത്. ചിത്രത്തിൻ്റെ ഫോർമാറ്റും നിങ്ങൾ വ്യക്തമാക്കേണ്ടതുണ്ട്.

നിങ്ങൾ ഇത് ചെയ്തിട്ടുണ്ടെങ്കിലും, പശ്ചാത്തലം ഇപ്പോഴും ബ്ലോക്കിൽ പ്രദർശിപ്പിച്ചിട്ടില്ലെങ്കിൽ, നിങ്ങൾ ചിത്രത്തിൻ്റെ പേര് ശരിയായി എഴുതിയിട്ടുണ്ടോ, പാതയും വിപുലീകരണവും ശരിയായി സജ്ജീകരിച്ചിട്ടുണ്ടോ എന്ന് വീണ്ടും പരിശോധിക്കുക. ബ്രൗസറിന് ചിത്രം കണ്ടെത്താൻ കഴിയാത്തതിനാൽ പശ്ചാത്തലം ദൃശ്യമാകാത്തതിൻ്റെ ഏറ്റവും സാധാരണമായ കാരണങ്ങൾ ഇവയാണ്.

എന്നാൽ ഒരു കാര്യം നിങ്ങൾ ശ്രദ്ധിച്ചോ? ബ്രൗസർ ചിത്രം എടുത്ത് ബ്ലോക്കിലുടനീളം ഗുണിച്ചു. അതിനാൽ, നിങ്ങൾക്കറിയാവുന്നതുപോലെ, ഇതാണ് പശ്ചാത്തല ചിത്രങ്ങളുടെ ഡിഫോൾട്ട് സ്വഭാവം - അവ ബ്ലോക്കിലേക്ക് ഒതുങ്ങാൻ കഴിയുന്നിടത്തോളം ലംബമായും തിരശ്ചീനമായും ആവർത്തിക്കുന്നു. ഈ പെരുമാറ്റത്തിലൂടെ നിങ്ങൾക്ക് എളുപ്പത്തിൽ നിയന്ത്രിക്കാനാകും. ഇത് ചെയ്യുന്നതിന്, 4 പ്രധാന മൂല്യങ്ങളുള്ള പശ്ചാത്തല-ആവർത്തന പ്രോപ്പർട്ടി ഉപയോഗിക്കുക:

ആവർത്തിക്കുക - സ്ഥിര മൂല്യം, ചിത്രം ഇരുവശത്തും ആവർത്തിക്കുന്നു;

Repeat-x - ആക്സിസ് x-ൽ മാത്രം ആവർത്തിക്കുന്നു;

Repeat-y - y അക്ഷത്തിൽ മാത്രം ആവർത്തിക്കുന്നു;

നോ-ആവർത്തനം - ഒരിക്കലും ആവർത്തിക്കുന്നില്ല;

നിങ്ങൾക്ക് ഓരോ മൂല്യവും എഴുതാനും എന്താണ് സംഭവിക്കുന്നതെന്ന് കാണാനും കഴിയും. ഞാൻ ഇതുപോലെ എഴുതാം:

പശ്ചാത്തലം-ആവർത്തനം: ആവർത്തിക്കുക-x;

പശ്ചാത്തലം - ആവർത്തിക്കുക: ആവർത്തിക്കുക - x;

ഇപ്പോൾ തിരശ്ചീനമായി മാത്രം ആവർത്തിക്കുക. നോ റിപ്പീറ്റ് സെറ്റ് ചെയ്താൽ ഒരു ചിത്രം മാത്രമേ ഉണ്ടാകൂ.

കൊള്ളാം, ഞങ്ങൾക്ക് ഇവിടെ പൂർത്തിയാക്കാം, കാരണം ഇവയാണ് പശ്ചാത്തലത്തിൽ പ്രവർത്തിക്കാനുള്ള അടിസ്ഥാന കഴിവുകൾ, എന്നാൽ കൂടുതൽ നിയന്ത്രണം നേടാൻ നിങ്ങളെ അനുവദിക്കുന്ന 2 പ്രോപ്പർട്ടികൾ കൂടി ഞാൻ നിങ്ങൾക്ക് കാണിച്ചുതരാം.

ആവർത്തനത്തിലൂടെ, ലേഔട്ട് ഡിസൈനർമാർക്ക് ഒരു ചെറിയ ഇമേജ് ഉപയോഗിച്ച് പശ്ചാത്തല ടെക്സ്ചറുകളും ഗ്രേഡിയൻ്റുകളും സൃഷ്ടിക്കാൻ കഴിയുമായിരുന്നു. ഇത് 30 ബൈ 10 പിക്സൽ അല്ലെങ്കിൽ അതിലും ചെറുതായിരിക്കാം. അല്ലെങ്കിൽ കുറച്ച് കൂടി. ചിത്രം ഒന്നോ രണ്ടോ വശത്ത് ആവർത്തിക്കുമ്പോൾ, പരിവർത്തനങ്ങളൊന്നും ദൃശ്യമാകാത്ത തരത്തിലായിരുന്നു, അതിനാൽ ഫലം ഒറ്റ, തടസ്സമില്ലാത്ത പശ്ചാത്തലമായിരുന്നു. വഴിയിൽ, നിങ്ങളുടെ വെബ്‌സൈറ്റിൽ തടസ്സമില്ലാത്ത ടെക്‌സ്‌ചർ ഒരു പശ്ചാത്തലമായി ഉപയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ ഈ സമീപനം ഇപ്പോൾ ഉപയോഗിക്കുന്നത് മൂല്യവത്താണ്. ഇന്ന്, css3 രീതികൾ ഉപയോഗിച്ച് ഒരു ഗ്രേഡിയൻ്റ് ഇതിനകം തന്നെ നടപ്പിലാക്കാൻ കഴിയും, ഞങ്ങൾ തീർച്ചയായും ഇതിനെക്കുറിച്ച് പിന്നീട് സംസാരിക്കും.

പശ്ചാത്തല സ്ഥാനം

സ്ഥിരസ്ഥിതിയായി, പശ്ചാത്തല ചിത്രം, അത് ആവർത്തിക്കാൻ സജ്ജമാക്കിയില്ലെങ്കിൽ, അതിൻ്റെ ബ്ലോക്കിൻ്റെ മുകളിൽ ഇടത് കോണിലായിരിക്കും. എന്നാൽ പശ്ചാത്തല-സ്ഥാന പ്രോപ്പർട്ടി ഉപയോഗിച്ച് സ്ഥാനം എളുപ്പത്തിൽ മാറ്റാൻ കഴിയും.

നിങ്ങൾക്ക് ഇത് വ്യത്യസ്ത രീതികളിൽ സജ്ജമാക്കാൻ കഴിയും. ചിത്രം സ്ഥിതിചെയ്യേണ്ട വശങ്ങൾ സൂചിപ്പിക്കുക എന്നതാണ് ഒരു ഓപ്ഷൻ:

പശ്ചാത്തല-സ്ഥാനം: വലത് മുകളിൽ;

പശ്ചാത്തല സ്ഥാനം: വലത് മുകളിൽ;

അതായത്, ലംബമായി എല്ലാം അതേപടി തുടരുന്നു: പശ്ചാത്തല ചിത്രം മുകളിൽ സ്ഥിതിചെയ്യുന്നു, പക്ഷേ തിരശ്ചീനമായി ഞങ്ങൾ വശം വലത്തേക്ക്, അതായത് വലത്തേക്ക് മാറ്റി. ഒരു സ്ഥാനം സജ്ജീകരിക്കുന്നതിനുള്ള മറ്റൊരു മാർഗ്ഗം ശതമാനമാണ്. ഈ സാഹചര്യത്തിൽ, മുകളിൽ ഇടത് കോണിൽ നിന്ന് ഏത് സാഹചര്യത്തിലും കൗണ്ട്ഡൗൺ ആരംഭിക്കുന്നു. 100% - മുഴുവൻ ബ്ലോക്ക്. അതിനാൽ, ചിത്രം കൃത്യമായി മധ്യഭാഗത്ത് സ്ഥാപിക്കുന്നതിന്, ഞങ്ങൾ ഇത് ഇതുപോലെ എഴുതുന്നു:

പശ്ചാത്തല-സ്ഥാനം: 50% 50%;

പശ്ചാത്തല-സ്ഥാനം: 50% 50%;

സ്ഥാനനിർണ്ണയത്തെക്കുറിച്ച് ഒരു പ്രധാന കാര്യം ഓർക്കുക - ആദ്യ പാരാമീറ്റർ എല്ലായ്പ്പോഴും തിരശ്ചീന സ്ഥാനമാണ്, രണ്ടാമത്തേത് ലംബ സ്ഥാനമാണ്. അതിനാൽ, നിങ്ങൾ 80% 20% മൂല്യം കാണുകയാണെങ്കിൽ, പശ്ചാത്തല ചിത്രം വലത്തേക്ക് വളരെയധികം മാറ്റുമെന്ന് നിങ്ങൾക്ക് ഉടനടി നിഗമനം ചെയ്യാം, പക്ഷേ അത് വളരെ കുറയില്ല.

അവസാനമായി, നിങ്ങൾക്ക് പിക്സലുകളിൽ സ്ഥാനം വ്യക്തമാക്കാൻ കഴിയും. എല്ലാം ഒന്നുതന്നെയാണ്,% എന്നതിനുപകരം മാത്രമേ px ഉണ്ടാകൂ. ചില സന്ദർഭങ്ങളിൽ, അത്തരം സ്ഥാനനിർണ്ണയം ആവശ്യമായി വന്നേക്കാം.

ചുരുക്കെഴുത്ത്

എല്ലാം ഞങ്ങൾ ചെയ്ത രീതിയിൽ സജ്ജീകരിച്ചിട്ടുണ്ടെങ്കിൽ കോഡ് വളരെ ബുദ്ധിമുട്ടുള്ളതായി മാറുമെന്ന് സമ്മതിക്കുക. ചിത്രത്തിലേക്കുള്ള പാത, ആവർത്തനം, സ്ഥാനം എന്നിവ വ്യക്തമാക്കേണ്ടതുണ്ടെന്ന് ഇത് മാറുന്നു. തീർച്ചയായും, ആവർത്തനവും സ്ഥാനവും എല്ലായ്പ്പോഴും ആവശ്യമില്ല, എന്നാൽ ഏത് സാഹചര്യത്തിലും, പ്രോപ്പർട്ടിക്കായി ഒരു ഷോർട്ട്ഹാൻഡ് നൊട്ടേഷൻ ഉപയോഗിക്കുന്നത് കൂടുതൽ ശരിയായിരിക്കും. ഇത് ഇതുപോലെ കാണപ്പെടുന്നു:

പശ്ചാത്തലം: #333 url(bg.jpg) നോ-ആവർത്തന 50% 50%;

പശ്ചാത്തലം: #333 url(bg.jpg) നോ-ആവർത്തന 50% 50%;

അതായത്, ആവശ്യമെങ്കിൽ മൊത്തത്തിലുള്ള സോളിഡ് പശ്ചാത്തല നിറം രേഖപ്പെടുത്തുക എന്നതാണ് ആദ്യപടി. പിന്നെ ചിത്രം, ആവർത്തനം, സ്ഥാനം എന്നിവയിലേക്കുള്ള പാത. ചില പാരാമീറ്റർ ആവശ്യമില്ലെങ്കിൽ, അത് ഒഴിവാക്കുക. സമ്മതിക്കുക, ഇത് വളരെ വേഗതയേറിയതും കൂടുതൽ സൗകര്യപ്രദവുമാണ്, കൂടാതെ ഞങ്ങൾ ഞങ്ങളുടെ കോഡും ഗണ്യമായി കുറയ്ക്കുന്നു. പൊതുവേ, നിങ്ങൾക്ക് ഒരു വർണ്ണമോ ചിത്രമോ മാത്രം സൂചിപ്പിക്കേണ്ടതുണ്ടെങ്കിൽപ്പോലും, എല്ലായ്പ്പോഴും സംക്ഷിപ്ത രൂപത്തിൽ എഴുതാൻ ഞാൻ നിങ്ങളെ ഉപദേശിക്കുന്നു.

പശ്ചാത്തല ചിത്രത്തിൻ്റെ വലുപ്പം നിയന്ത്രിക്കുന്നു

ഞങ്ങളുടെ നിലവിലെ ചിത്രം അടുത്ത ട്രിക്ക് കാണിക്കുന്നതിന് അത്ര നല്ലതല്ല, അതിനാൽ ഞാൻ മറ്റൊന്ന് എടുക്കും. അത് ഒരു ബ്ലോക്കിൻ്റെ വലിപ്പമോ അതിൽ കൂടുതലോ ആകട്ടെ. അതിനാൽ, ഒരു പശ്ചാത്തല ഇമേജ് നിർമ്മിക്കാനുള്ള ചുമതല നിങ്ങൾ അഭിമുഖീകരിക്കുന്നുവെന്ന് സങ്കൽപ്പിക്കുക, അങ്ങനെ അത് അതിൻ്റെ ബ്ലോക്ക് പൂർണ്ണമായും നിറയ്ക്കില്ല. ചിത്രം, ഉദാഹരണത്തിന്, ബ്ലോക്ക് വലുപ്പത്തേക്കാൾ വലുതാണ്.

ഈ സാഹചര്യത്തിൽ നിങ്ങൾക്ക് എന്തുചെയ്യാൻ കഴിയും? തീർച്ചയായും, ഏറ്റവും ലളിതവും ന്യായയുക്തവുമായ ഓപ്ഷൻ ഇമേജ് കുറയ്ക്കുക എന്നതാണ്, പക്ഷേ ഇത് ചെയ്യാൻ എല്ലായ്പ്പോഴും സാധ്യമല്ല. ഇത് സെർവറിൽ ഉണ്ടെന്ന് പറയട്ടെ, ഇപ്പോൾ അത് കുറയ്ക്കാൻ സമയമോ അവസരമോ ഇല്ല. ബാക്ക്ഗ്രൗണ്ട് സൈസ് പ്രോപ്പർട്ടി ഉപയോഗിച്ച് പ്രശ്നം പരിഹരിക്കാൻ കഴിയും, അത് താരതമ്യേന പുതിയത് എന്ന് വിളിക്കാം, ഇത് പശ്ചാത്തല ചിത്രത്തിൻ്റെ വലുപ്പം കൈകാര്യം ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു, തീർച്ചയായും ഏത് പശ്ചാത്തലവും.

അതിനാൽ എൻ്റെ ചിത്രം ഇപ്പോൾ ബ്ലോക്കിലെ മുഴുവൻ സ്ഥലവും എടുക്കുന്നു, പക്ഷേ ഞാൻ അതിന് ഒരു പശ്ചാത്തല വലുപ്പം നൽകും:

പശ്ചാത്തല വലുപ്പം: 80% 50%;

പശ്ചാത്തല വലുപ്പം: 80% 50%;

വീണ്ടും, ആദ്യ പരാമീറ്റർ തിരശ്ചീന വലുപ്പം സജ്ജമാക്കുന്നു, രണ്ടാമത്തേത് - ലംബ വലുപ്പം. എല്ലാം ശരിയായി പ്രയോഗിച്ചതായി ഞങ്ങൾ കാണുന്നു - ഫോട്ടോ ബ്ലോക്കിൻ്റെ വീതിയുടെ 80% വീതിയിലും പകുതി ഉയരത്തിലും ആയി. ഇവിടെ നിങ്ങൾ ഒരു വ്യക്തത വരുത്തേണ്ടതുണ്ട് - വലുപ്പം ഒരു ശതമാനമായി സജ്ജീകരിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് ചിത്രത്തിൻ്റെ അനുപാതത്തെ സ്വാധീനിക്കാൻ കഴിയും. അതിനാൽ അനുപാതങ്ങൾ തെറ്റിക്കാതിരിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ ശ്രദ്ധിക്കുക.

നിങ്ങൾക്ക് ഊഹിക്കാൻ കഴിയുന്നതുപോലെ, പശ്ചാത്തല വലുപ്പവും പിക്സലുകളിൽ വ്യക്തമാക്കാം. ഉപയോഗിക്കാവുന്ന രണ്ട് കീവേഡുകൾ കൂടി ഉണ്ട്:

കവർ - ചിത്രം സ്കെയിൽ ചെയ്യപ്പെടും, അങ്ങനെ കുറഞ്ഞത് ഒരു വശത്തെങ്കിലും അത് ബ്ലോക്ക് പൂർണ്ണമായും നിറയ്ക്കുന്നു.

അടങ്ങുക - അത് സ്കെയിൽ ചെയ്യുക, അങ്ങനെ ഇമേജ് അതിൻ്റെ പരമാവധി വലുപ്പത്തിൽ ബ്ലോക്കിലേക്ക് പൂർണ്ണമായും യോജിക്കുന്നു.

ഈ മൂല്യങ്ങളുടെ പ്രയോജനം, അവ ചിത്രത്തിൻ്റെ അനുപാതം മാറ്റുന്നില്ല, അവ അതേപടി നിലനിർത്തുന്നു എന്നതാണ്.

ചിത്രം വലിച്ചുനീട്ടുന്നത് അതിൻ്റെ ഗുണനിലവാരത്തിൽ തകർച്ചയിലേക്ക് നയിക്കുമെന്നും നിങ്ങൾ മനസ്സിലാക്കണം. ലേഔട്ട് ഡിസൈനർമാരുടെ ജീവിതത്തിലും യഥാർത്ഥ പരിശീലനത്തിലും നിന്ന് എനിക്ക് ഒരു ഉദാഹരണം നൽകാൻ കഴിയും. ഡെസ്‌ക്‌ടോപ്പുകൾക്കായി രൂപകൽപന ചെയ്യുമ്പോൾ, പ്രധാന മോണിറ്റർ വീതിയിൽ സൈറ്റിനെ പൊരുത്തപ്പെടുത്തേണ്ടതുണ്ടെന്ന് എല്ലാവർക്കും അറിയാം, മനസ്സിലാക്കുന്നു: 1280, 1366, 1920. നിങ്ങൾ ഒരു പശ്ചാത്തല ഇമേജ് എടുക്കുകയാണെങ്കിൽ, 1280 ബൈ 200 വലുപ്പത്തിൽ, അത് നൽകരുത്. ഒരു പശ്ചാത്തല വലുപ്പം, തുടർന്ന് വലിയ വീതിയുള്ള സ്ക്രീനുകൾ ഒരു ശൂന്യമായ ഇടം ദൃശ്യമാകും, ചിത്രം വീതി പൂർണ്ണമായും പൂരിപ്പിക്കില്ല.

99% കേസുകളിലും, ഇത് വെബ് ഡെവലപ്പർക്ക് അനുയോജ്യമല്ല, അതിനാൽ അദ്ദേഹം പശ്ചാത്തല വലുപ്പം സജ്ജമാക്കുന്നു: കവർ അങ്ങനെ ചിത്രം എല്ലായ്പ്പോഴും വിൻഡോയുടെ പരമാവധി വീതിയിലേക്ക് നീളുന്നു. ഇത് ഉപയോഗിക്കാൻ നല്ലൊരു സാങ്കേതികതയാണ്, എന്നാൽ 1920 പിക്സലുകളുടെ സ്ക്രീൻ വീതിയുള്ള ഉപയോക്താക്കൾക്ക് ഉപയോക്തൃ ചിത്ര നിലവാരം കാണാൻ കഴിഞ്ഞേക്കാവുന്ന പ്രശ്നം നിങ്ങൾ അഭിമുഖീകരിക്കും.

ഞാൻ നിങ്ങളെ ഓർമ്മിപ്പിക്കട്ടെ, അത് അതിൻ്റെ പരമാവധി വീതിയിലേക്ക് നീട്ടും. അതനുസരിച്ച്, ഗുണനിലവാരം യാന്ത്രികമായി മോശമാകും. 1920 പിക്സൽ വീതിയുള്ള ഒരു വലിയ ഇമേജ് ഉപയോഗിക്കുക എന്നതാണ് ഇവിടെ ശരിയായ പരിഹാരം. വിശാലമായ സ്ക്രീനുകളിൽ അത് സ്വാഭാവിക വലുപ്പത്തിലായിരിക്കും, മറ്റുള്ളവയിൽ അത് ക്രമേണ വെട്ടിമാറ്റപ്പെടും, എന്നാൽ അതേ സമയം, പശ്ചാത്തല ചിത്രം ശരിയായി തിരഞ്ഞെടുത്തിട്ടുണ്ടെങ്കിൽ, ഇത് സൈറ്റിൻ്റെ രൂപത്തെ ബാധിക്കില്ല.

പൊതുവേ, യഥാർത്ഥ ലേഔട്ടുകൾ സ്ഥാപിക്കുമ്പോൾ ഈ ലേഖനത്തിൽ നിങ്ങൾ നേടിയ അറിവ് എങ്ങനെ ഉപയോഗിക്കാമെന്നതിൻ്റെ 1 ഉദാഹരണം മാത്രമാണ് ഇത്.

css ഉപയോഗിക്കുന്ന അർദ്ധസുതാര്യ പശ്ചാത്തലം

css ഉപയോഗിച്ച് നടപ്പിലാക്കാൻ കഴിയുന്ന മറ്റൊരു സവിശേഷത അർദ്ധസുതാര്യമായ പശ്ചാത്തലമാണ്. അതായത്, ഈ പശ്ചാത്തലത്തിലൂടെ ഇതിന് പിന്നിൽ എന്താണെന്ന് കാണാൻ കഴിയും.

ഉദാഹരണമായി, ഉദാഹരണങ്ങളിൽ ഞങ്ങൾ മുമ്പ് ഉപയോഗിച്ച ചിത്രത്തിൻ്റെ പശ്ചാത്തലമായി മുഴുവൻ പേജും ഞാൻ സജ്ജമാക്കും. ഞങ്ങളുടെ എല്ലാ പരീക്ഷണങ്ങളും നടത്തുന്ന ഐഡൻ്റിഫയർ bg ഉള്ള ബ്ലോക്കിനായി, rgba കളർ സെറ്റിംഗ് ഫോർമാറ്റ് ഉപയോഗിച്ച് ഞങ്ങൾ പശ്ചാത്തലം സജ്ജമാക്കും.

ഞാൻ നേരത്തെ പറഞ്ഞതുപോലെ, CSS- ൽ നിറങ്ങൾ ക്രമീകരിക്കുന്നതിന് നിരവധി ഫോർമാറ്റുകൾ ഉണ്ട്. അവയിലൊന്നാണ് rgb, ഗ്രാഫിക് എഡിറ്റർമാരിൽ ജോലി ചെയ്യുന്നവർക്ക് വളരെ അറിയപ്പെടുന്ന ഫോർമാറ്റ്. ഇത് ഇങ്ങനെ എഴുതിയിരിക്കുന്നു: rgb(17, 255, 34);

ബ്രാക്കറ്റുകളിലെ ആദ്യ മൂല്യം ചുവപ്പ്, പിന്നെ പച്ച, പിന്നെ നീല എന്നിവയുടെ സാച്ചുറേഷൻ ആണ്. മൂല്യം 0 മുതൽ 255 വരെയുള്ള സംഖ്യകളാകാം. അതനുസരിച്ച്, rgba ഫോർമാറ്റ് വ്യത്യസ്തമല്ല, ഒരു പാരാമീറ്റർ കൂടി ചേർത്തു - ആൽഫ ചാനൽ. മൂല്യം 0 മുതൽ 1 വരെയാകാം, ഇവിടെ 0 എന്നത് പൂർണ്ണ സുതാര്യതയാണ്.

എല്ലാവർക്കും ഹായ്! ഒരു വെബ്‌സൈറ്റിനായി ഒരു പശ്ചാത്തലം എങ്ങനെ സജ്ജീകരിക്കാം എന്ന വിഷയത്തിൽ ഉപയോഗപ്രദവും പ്രായോഗികവുമായ മെറ്റീരിയലിൻ്റെ ഒരു ഭാഗവുമായി നിങ്ങളുടെ എളിയ ദാസൻ നിങ്ങളുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു. ഇത് html ലേഔട്ടിൻ്റെ തുടക്കമാണ്, ഇൻ്റർനെറ്റ് ഉപയോക്താവിനെ തീർച്ചയായും ആകർഷിക്കുകയും ഒറിജിനാലിറ്റി ചേർക്കുകയും ചെയ്യുന്ന ഒരു സൈറ്റിനായി നിങ്ങൾക്ക് എങ്ങനെ മനോഹരമായ ഒരു പശ്ചാത്തലം നിർമ്മിക്കാമെന്ന് ഒരു ഉദാഹരണം ഉപയോഗിച്ച് ഞാൻ ഇവിടെ വ്യക്തമായി കാണിക്കും.

നിങ്ങൾ ശ്രദ്ധിച്ചാൽ, മിക്ക ഓൺലൈൻ ബിസിനസുകാരും അവരുടെ വിൽപ്പനയിലും സബ്‌സ്‌ക്രിപ്‌ഷൻ പേജുകളിലും ഒരു അദ്വിതീയ പശ്ചാത്തലം ഉപയോഗിക്കുന്നു. ഈ പ്രക്രിയയുടെ സാങ്കേതിക ഘടകം ഇന്ന് നമ്മൾ വിശകലനം ചെയ്യും.

അതിനാൽ, ആദ്യം നമുക്ക് തീർച്ചയായും ഒരു ചിത്രം ആവശ്യമാണ്. നിങ്ങൾക്ക് വ്യത്യസ്തമായി ഡൗൺലോഡ് ചെയ്യാൻ കഴിയുന്ന ഒരു മികച്ച സൈറ്റ് വിദേശ ഇൻ്റർനെറ്റിൽ ഉണ്ട് വെബ്സൈറ്റ് പശ്ചാത്തലത്തിനുള്ള ചിത്രങ്ങൾ. അവയിൽ ഒരു വലിയ സംഖ്യ അവിടെയുണ്ട്. സൂക്ഷ്മമായ പാറ്റേണുകൾ എന്നാണ് സൈറ്റിൻ്റെ പേര്.

ഗൂഗിൾ സെർച്ച് എഞ്ചിൻ ലിസ്റ്റിൽ ഇത് ആദ്യ സ്ഥാനത്താണ് ദൃശ്യമാകുന്നത്, അതിനാൽ ജോലിക്കായി ഞാൻ ഇത് ശുപാർശ ചെയ്യുന്നു. "പശ്ചാത്തല ഇമേജ് പാറ്റേണുകൾ", "സൈറ്റിനായുള്ള പശ്ചാത്തല ചിത്രം ഡൗൺലോഡ് ചെയ്യുക" എന്നിങ്ങനെയുള്ള എന്തെങ്കിലും നിങ്ങൾ ഒരു സെർച്ച് എഞ്ചിനിൽ ടൈപ്പുചെയ്യുകയാണെങ്കിൽ നിങ്ങൾക്ക് മറ്റ് നിരവധി സൈറ്റുകളും കണ്ടെത്താനാകും.

നിങ്ങൾക്ക് ഇംഗ്ലീഷ് ഭാഷയിൽ പ്രശ്നങ്ങളൊന്നും ഇല്ലെങ്കിൽ, നിങ്ങൾക്ക് അത് ബുദ്ധിമുട്ടില്ലാതെ മനസ്സിലാകും.

ഈ ലേഖനത്തിൽ ഞാൻ ഒരു വിഷയം തിരഞ്ഞെടുത്തു, അതിനെ ട്വീഡ് എന്ന് വിളിക്കുന്നു. നിങ്ങൾക്ക് അത് ഡൗൺലോഡ് ചെയ്യാം.

വെബ്‌സൈറ്റിലെ ഒരു ചെറിയ പതിപ്പിൽ ഇത് ഇങ്ങനെയാണ് കാണപ്പെടുന്നത്

ആദ്യം, പ്രോഗ്രാമിൽ ഒരു പുതിയ പ്രമാണം സൃഷ്ടിക്കുക

അത് എഡിറ്റുചെയ്യുന്നതിന് മുമ്പ്, അത് ഒരു പേരിൽ സംരക്ഷിക്കുന്നത് ഉറപ്പാക്കുക, ഉദാഹരണത്തിന് index.htmlകമ്പ്യൂട്ടറിൽ ഒരു ഫോൾഡർ സൃഷ്‌ടിക്കുക, ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് “എൻ്റെ സൈറ്റ്” എന്ന ഫോൾഡർ സൃഷ്‌ടിച്ച് അതിൽ ഞങ്ങളുടെ ഇൻഡക്‌സ് ഫയൽ (index.html) സ്ഥാപിക്കാം. ബ്രൗസർ ആശയക്കുഴപ്പത്തിലാകാതിരിക്കാൻ ഇംഗ്ലീഷിൽ ഒരു ഫോൾഡർ സൃഷ്‌ടിക്കുന്നതാണ് നല്ലത്. കൂടാതെ സൈറ്റ് തെറ്റായി പ്രദർശിപ്പിക്കുക.

ഇതുകൂടാതെ, "എൻ്റെ സൈറ്റ്" എന്ന പ്രധാന ഫോൾഡറിൽ നിങ്ങൾ രണ്ട് സബ്ഫോൾഡറുകൾ കൂടി സൃഷ്ടിക്കേണ്ടതുണ്ട്, ഒന്നിൽ ഞങ്ങൾ ഞങ്ങളുടെ എല്ലാ ചിത്രങ്ങളും സ്ഥാപിക്കും, അതിനെ "ഇമേജുകൾ" എന്ന് വിളിക്കും, മറ്റൊന്ന് ഞങ്ങൾ "സിഎസ്എസ്" (കാസ്കേഡിംഗ് ശൈലി" എന്ന് വിളിക്കും. ഷീറ്റുകൾ) ഫയൽ അവിടെ സ്ഥാപിക്കുക style.css

ഇപ്പോൾ നമുക്ക് നമ്മുടെ പ്രമാണത്തിൽ പ്രവർത്തിക്കാം. പ്രധാന ചട്ടക്കൂട് എന്ന് വിളിക്കപ്പെടുന്ന ഒരു ശൂന്യമായ HTML കോഡ് ചേർക്കുക എന്നതാണ് അടുത്ത ഘട്ടം. നിങ്ങൾക്ക് ഇത് നേരിട്ട് ഡൗൺലോഡ് ചെയ്യാം. അടുത്തതായി, ഞങ്ങൾ ഈ ഫയലിൽ നിന്ന് എല്ലാം പകർത്തി ഞങ്ങളുടെ പ്രോഗ്രാം ഫയലിലേക്ക് മാറ്റും. അന്തിമഫലം ഇനിപ്പറയുന്നതു പോലെയായിരിക്കണം

ഫയലിൻ്റെ പേരിന് അടുത്തായി ഒരു ചുവന്ന ഫ്ലോപ്പി ഡിസ്ക് നിങ്ങൾ കാണും. അതിനാൽ, ഇത് ചുവപ്പാണെങ്കിൽ, ഫയൽ സംരക്ഷിച്ചിട്ടില്ല എന്നാണ് ഇതിനർത്ഥം, സേവ് ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുന്നത് ഉറപ്പാക്കുക, അങ്ങനെ ഫ്ലോപ്പി ഡിസ്ക് നീലയായി മാറുന്നു.

ടൈറ്റിൽ ടാഗിൽ നിങ്ങൾക്ക് പ്രമാണത്തിൻ്റെ ശീർഷകം മാറ്റാൻ കഴിയും, ഉദാഹരണത്തിന് നിങ്ങൾക്ക് ഇത് "എൻ്റെ ആദ്യ വെബ് പേജ്" ആക്കാം. നിങ്ങളുടെ പേജ് എൻകോഡിംഗിൽ സംരക്ഷിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക UTF-8

അല്ലെങ്കിൽ, മറ്റൊരു എൻകോഡിംഗ് ഉണ്ടെങ്കിൽ, ഉദാഹരണത്തിന് windows-1251, ബ്രൗസറിലെ പ്രമാണത്തിൻ്റെ ടെക്സ്റ്റ് ഹൈറോഗ്ലിഫുകളിൽ പ്രദർശിപ്പിക്കും. പ്രോഗ്രാം ടൂൾബാറിലെ "എൻകോഡിംഗുകൾ - Utf-8 ലെ എൻകോഡ് (BOM ഇല്ലാതെ)" വിഭാഗത്തിൽ നിങ്ങൾക്ക് എൻകോഡിംഗ് മാറ്റാവുന്നതാണ്.

നമ്മൾ ചെയ്യുന്ന ഓരോ പ്രവർത്തനവും സംരക്ഷിക്കാൻ മറക്കരുത്.

ഇനി നമുക്ക് നമ്മുടെ ഡോക്യുമെൻ്റിൽ പശ്ചാത്തലം സൃഷ്ടിക്കാൻ തുടങ്ങാം. ഒരു വെബ് പേജിൻ്റെ രൂപകൽപ്പനയിലെ ഞങ്ങളുടെ എല്ലാ പ്രവർത്തനങ്ങളും CSS എന്ന കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിച്ചാണ് നടക്കുകയെന്ന് ഞാൻ ഉടൻ പറയും, അതായത്, ഞങ്ങൾ html-ൽ ഫ്രെയിം സൃഷ്ടിക്കും, ഞങ്ങൾ അത് ഉപയോഗിച്ച് മനോഹരമായ ശൈലിയിലും രൂപത്തിലും കൊണ്ടുവരും. സി.എസ്.എസ്.

ഈ രീതിയിൽ, പ്രവർത്തനങ്ങളുടെ ശരിയായ ക്രമം നിങ്ങൾ സ്വയം പഠിപ്പിക്കും. HTML ഡോക്യുമെൻ്റിൽ നിങ്ങൾ ശൈലികൾ നേരിട്ട് കൈകാര്യം ചെയ്യരുത്; അവ ഒരു പ്രത്യേക പ്രമാണത്തിൽ ഇടുന്നതാണ് നല്ലത്.

ഇത് ചെയ്യുന്നതിന്, ഞങ്ങളുടെ നോട്ട്പാഡ് ++ പ്രോഗ്രാമിൽ ഞങ്ങൾ മറ്റൊരു ഫയൽ സൃഷ്ടിക്കുകയും അതിനെ Style.css എന്ന് വിളിക്കുകയും ഒരു പുതിയ css ഫോൾഡറിൽ സംരക്ഷിക്കുകയും ചെയ്യും, അത് പങ്കിട്ട ഫോൾഡറിൽ "എൻ്റെ സൈറ്റ്" സ്ഥിതിചെയ്യും.

കൊള്ളാം! ഞങ്ങളുടെ ബ്രൗസറിന് പേജ് ശരിയായി പ്രദർശിപ്പിക്കുന്നതിന്, സ്റ്റൈൽ ഷീറ്റ് ഞങ്ങളുടെ html ഡോക്യുമെൻ്റുമായി ബന്ധിപ്പിക്കേണ്ടതുണ്ട്. ഇത് എങ്ങനെ ചെയ്യുന്നുവെന്ന് ഇതാ

മുകളിലുള്ള മുഴുവൻ വരിയും ഞങ്ങൾ നേരിട്ട് നൽകുന്നു. ഈ വരി ഉപയോഗിച്ച് ഞങ്ങൾ ഞങ്ങളുടെ സ്റ്റൈൽ ഷീറ്റിനെ ബന്ധിപ്പിക്കുന്നു.
ഇപ്പോൾ സ്റ്റൈൽ ഷീറ്റിലൂടെ നമ്മുടെ ബോഡി ടാഗിനായി ഒരു പശ്ചാത്തല ചിത്രം ഞങ്ങൾ നിർവ്വചിക്കും. ഇത് ചെയ്യുന്നതിന്, ഞങ്ങൾ style.css പ്രമാണത്തിൽ ഇനിപ്പറയുന്ന ഘടന സൃഷ്ടിക്കുന്നു (അത് എടുത്ത് പ്രോഗ്രാം കോഡിൽ എഴുതുക)

ഞാൻ ഇവിടെ അല്പം വിശദീകരിക്കാം. പശ്ചാത്തല ആട്രിബ്യൂട്ടിന് നിരവധി മൂല്യങ്ങളുണ്ട്, അവയിലൊന്ന് പശ്ചാത്തല-ആവർത്തനമാണ്, ഇത് വെബ് ഡോക്യുമെൻ്റിനായി ഞങ്ങളുടെ പശ്ചാത്തല ചിത്രം വലിച്ചുനീട്ടുന്നതിന് ഉത്തരവാദിയാണ്.

പശ്ചാത്തലം-ആവർത്തനം:

ആവർത്തിക്കുക //(തിരശ്ചീനമായും ലംബമായും വലിച്ചുനീട്ടുക) REPEAT-X // (തിരശ്ചീനമായി മാത്രം നീട്ടുക) REPEAT-Y //(ലംബമായി മാത്രം നീട്ടുക) ഇല്ല-ആവർത്തനം //(പശ്ചാത്തല ചിത്രം ആവർത്തിക്കരുത്)

ഞങ്ങളുടെ കാര്യത്തിൽ, ഞങ്ങളുടെ ചെറിയ ചിത്രം ലംബമായും തിരശ്ചീനമായും ഞങ്ങൾ ആവർത്തിക്കുന്നു. തൽഫലമായി, പേജ് മുഴുവൻ ഞങ്ങളുടെ ചിത്രം കൊണ്ട് നിറഞ്ഞിരിക്കുന്നു. ബ്രൗസറിൽ ഇത് ഇങ്ങനെയാണ് കാണപ്പെടുന്നത്:

നിങ്ങൾക്ക് സൈറ്റിനായി മനോഹരമായ ഒരു പശ്ചാത്തലം ഡൌൺലോഡ് ചെയ്യാൻ കഴിയുന്ന സൈറ്റുകളുടെ ഒരു സെലക്ഷനും ഞാൻ തയ്യാറാക്കിയിട്ടുണ്ട്

കോമകളാൽ വേർതിരിക്കുന്ന ഓരോ പശ്ചാത്തലത്തിൻ്റെയും പാരാമീറ്ററുകൾ ലിസ്റ്റുചെയ്യുന്ന ഒരു ഘടകത്തിലേക്ക് അനിയന്ത്രിതമായ പശ്ചാത്തല ഇമേജുകൾ ചേർക്കാൻ ആധുനിക ബ്രൗസറുകൾ നിങ്ങളെ അനുവദിക്കുന്നു. യൂണിവേഴ്സൽ ബാക്ക്ഗ്രൗണ്ട് പ്രോപ്പർട്ടി ഉപയോഗിക്കുകയും അതിന് ആദ്യം ഒരു പശ്ചാത്തലവും രണ്ടാമത്തേത് കോമ കൊണ്ട് വേർതിരിക്കുകയും ചെയ്താൽ മതിയാകും.

വിൻഡോയുടെ മുഴുവൻ വീതിയിലേക്ക് പശ്ചാത്തലം എങ്ങനെ നീട്ടാം?

പശ്ചാത്തലം അളക്കാൻ, പശ്ചാത്തല വലുപ്പത്തിലുള്ള പ്രോപ്പർട്ടി ഉപയോഗിക്കുക; അതിൻ്റെ മൂല്യം 100% ആയി സജ്ജമാക്കുക, തുടർന്ന് ബ്രൗസർ വിൻഡോയുടെ മുഴുവൻ വീതിയും പശ്ചാത്തലം ഉൾക്കൊള്ളും. ബ്രൗസറുകളുടെ പഴയ പതിപ്പുകൾക്കായി, ഉദാഹരണം 1-ൽ കാണിച്ചിരിക്കുന്നതുപോലെ, പ്രിഫിക്സുകളുള്ള പ്രത്യേക പ്രോപ്പർട്ടികൾ നിങ്ങൾ ഉപയോഗിക്കണം.

ഒരു വെബ് പേജിലേക്ക് ഒരു പശ്ചാത്തല ചിത്രം എങ്ങനെ ചേർക്കാം?

ഒരു വെബ് പേജിലേക്ക് ഒരു പശ്ചാത്തല ചിത്രം ചേർക്കുന്നതിന്, പശ്ചാത്തല ശൈലിയിലുള്ള പ്രോപ്പർട്ടിയുടെ url മൂല്യത്തിനുള്ളിൽ ചിത്രത്തിലേക്കുള്ള പാത സജ്ജമാക്കുക, അത് ബോഡി സെലക്ടറിലേക്ക് ചേർക്കുന്നു.

ഒരു ആനിമേറ്റഡ് പശ്ചാത്തലം ഉണ്ടാക്കാൻ കഴിയുമോ?

ഏതൊരു പ്രമാണത്തിനും ജീവൻ പകരാൻ കഴിയുന്ന സാമാന്യം ശക്തമായ ഒരു സാങ്കേതികതയാണ് ആനിമേഷൻ, അതിനാൽ വെബ് പേജുകളിലേക്ക് കാർട്ടൂണുകൾ ചേർക്കുന്ന ഫ്ലാഷ് സാങ്കേതികവിദ്യയും അതിൽ സംവേദനാത്മകമായവയും വളരെ ജനപ്രിയമായതിൽ അതിശയിക്കാനില്ല. GIF ഗ്രാഫിക് ഫോർമാറ്റ് ഫ്രെയിമുകൾ തുടർച്ചയായി മാറ്റുന്നതിലൂടെ ലളിതമായ ആനിമേഷനും പിന്തുണയ്ക്കുന്നു. അതിനാൽ, ഈ ഫോർമാറ്റിലുള്ള ഒരു ഇമേജ് ഉപയോഗിച്ച്, വ്യക്തിഗത ഇമേജുകൾ മാത്രമല്ല, ഒരു വെബ് പേജിൻ്റെ അല്ലെങ്കിൽ ഒരു പ്രത്യേക ഘടകത്തിൻ്റെ പശ്ചാത്തലവും ആനിമേറ്റ് ചെയ്യാൻ കഴിയും.

ആദ്യം, നിങ്ങൾ GIF ഫോർമാറ്റിൽ ഒരു ആനിമേറ്റഡ് ഇമേജ് സൃഷ്ടിക്കേണ്ടതുണ്ട്, ഇതിനായി നിങ്ങൾക്ക് Adobe Photoshop അല്ലെങ്കിൽ ഈ ആവശ്യത്തിനായി മറ്റൊരു അനുയോജ്യമായ പ്രോഗ്രാം ഉപയോഗിക്കാം. പശ്ചാത്തല ചിത്രമായി ഉപയോഗിക്കാവുന്ന റെഡിമെയ്ഡ് ആനിമേറ്റഡ് ഫയലുകളുടെ ലൈബ്രറികളുമുണ്ട്. അടുത്തതായി, ഉദാഹരണം 1-ൽ കാണിച്ചിരിക്കുന്നതുപോലെ, പശ്ചാത്തല ശൈലിയിലുള്ള പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ചിത്രം ഒരു പശ്ചാത്തലമായി ചേർക്കുന്നു.

പേജിൻ്റെ താഴെ വലത് കോണിൽ ഒരു പശ്ചാത്തല ചിത്രം എങ്ങനെ സ്ഥാപിക്കാം?

പേജിലെ പശ്ചാത്തല ചിത്രത്തിൻ്റെ സ്ഥാനം നിയന്ത്രിക്കുന്നതിന്, പശ്ചാത്തല-സ്ഥാന ശൈലിയിലുള്ള പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു; ഇത് ഒരേസമയം ചിത്രത്തിൻ്റെ തിരശ്ചീനവും ലംബവുമായ കോർഡിനേറ്റുകൾ സജ്ജമാക്കുന്നു. ഒരു പശ്ചാത്തല ചിത്രം ആവർത്തിക്കുന്നത് റദ്ദാക്കാൻ, നോ-ആവർത്തന മൂല്യമുള്ള പശ്ചാത്തല-സ്ഥാന പ്രോപ്പർട്ടി ഉപയോഗിക്കുക.

പശ്ചാത്തലം ആവർത്തിക്കുന്നത് എങ്ങനെ തടയാം?

സ്ഥിരസ്ഥിതിയായി, പശ്ചാത്തല ചിത്രം തിരശ്ചീനമായും ലംബമായും ആവർത്തിക്കുന്നു, ഇത് വെബ് പേജിൻ്റെ മുഴുവൻ ഫീൽഡിലും മൊസൈക്ക് രൂപപ്പെടുത്തുന്നു. എന്നിരുന്നാലും, ഈ പശ്ചാത്തല സ്വഭാവം എല്ലായ്‌പ്പോഴും ആവശ്യമില്ല, പ്രത്യേകിച്ചും ഒരൊറ്റ ചിത്രം സ്ഥാപിക്കുമ്പോൾ, അതിനാൽ പശ്ചാത്തല ശൈലിയിലുള്ള പ്രോപ്പർട്ടിയിലേക്ക് ആവർത്തിക്കാത്ത മൂല്യം ചേർക്കുന്നത് സഹായിക്കും.

എനിക്ക് എങ്ങനെ പശ്ചാത്തലം ലംബമായി മാത്രം ആവർത്തിക്കാനാകും?

ഒരു വെബ് പേജ് എലമെൻ്റിൻ്റെയോ വിൻഡോയുടെയോ ഉയരവുമായി ബന്ധിപ്പിച്ചിരിക്കുന്ന അലങ്കാര ലൈനുകളോ ഗ്രേഡിയൻ്റുകളോ സൃഷ്ടിക്കുന്നതിന് പശ്ചാത്തല ആവർത്തനം സാധാരണയായി ആവശ്യമാണ്. അത്തരം സന്ദർഭങ്ങളിൽ, പശ്ചാത്തലം ലംബമായി ആവർത്തിക്കുന്നത് മൂലകങ്ങളുടെ വലിപ്പം കണക്കിലെടുക്കാതെ, സ്ഥിരമായ ഒരു ചിത്രം നൽകുന്നു. പശ്ചാത്തല ചിത്രം സീമുകളില്ലാതെ ആവർത്തിക്കുന്നുവെന്ന് ആദ്യം നിങ്ങൾ ഉറപ്പാക്കണം.

മിക്കവാറും എല്ലാ ജനപ്രിയ വെബ്‌സൈറ്റിനും മനോഹരമായ രൂപമുണ്ട്. വെബ്‌സൈറ്റ് രൂപകൽപ്പനയുടെ ഒരു പ്രധാന ഭാഗം പശ്ചാത്തലം എന്നും അറിയപ്പെടുന്നു, അത് നമുക്ക് ഓരോരുത്തർക്കും സൃഷ്ടിക്കാനോ മാറ്റാനോ കഴിയും. ഒരു വെബ്‌സൈറ്റിൽ ഒരു പശ്ചാത്തലം എങ്ങനെ സ്ഥാപിക്കാമെന്ന് ഈ ലേഖനത്തിൽ ഞാൻ നിങ്ങളോട് പറയും.

വെബ്‌സൈറ്റുകൾക്ക് ഒരു പുതിയ പശ്ചാത്തലം ഉണ്ടാക്കുന്നു

ചുമതല പൂർത്തിയാക്കാൻ, നിങ്ങൾക്ക് 4 രീതികളിൽ ഒന്ന് ഉപയോഗിക്കാം:

• 1. ഒരു നിറമുള്ള പശ്ചാത്തലം
• 2. ടെക്സ്ചർ ഉള്ള പശ്ചാത്തലം
• 3. ഗ്രേഡിയൻ്റ് ഉപയോഗിക്കുന്ന പശ്ചാത്തലം
• 4. ഒരു വലിയ ചിത്രത്തിൽ നിന്നുള്ള പശ്ചാത്തലം

ഒരു നിറം ഉപയോഗിച്ച് ഒരു പശ്ചാത്തലം സൃഷ്ടിക്കുക

ഒരു വർണ്ണം ഉൾക്കൊള്ളുന്ന സൈറ്റിൻ്റെ പശ്ചാത്തലം സൃഷ്ടിക്കുന്നതിനോ മാറ്റുന്നതിനോ, നിങ്ങൾ ഫയലിലേക്ക് പോകേണ്ടതുണ്ട് style.css, അതിൽ മൂല്യം കണ്ടെത്തുക - ബോഡി (സൈറ്റിൻ്റെ പ്രധാന ബോഡിക്ക് ഇത് ഉത്തരവാദിയാണ്). ഇപ്പോൾ നിങ്ങൾ പശ്ചാത്തല-വർണ്ണ പ്രവർത്തനം നിലവിലില്ലെങ്കിൽ അത് രജിസ്റ്റർ ചെയ്യുകയും കളർ കോഡ് വ്യക്തമാക്കുകയും വേണം. ഒരു വെബ്‌സൈറ്റിനായി നിങ്ങൾക്ക് ഒരു വെളുത്ത പശ്ചാത്തലം സൃഷ്ടിക്കേണ്ടിവരുമ്പോൾ, നിങ്ങൾ ഇനിപ്പറയുന്ന കോഡ് എഴുതേണ്ടതുണ്ട്:

പശ്ചാത്തല നിറം: #83C5E9 ; (ഉദാഹരണത്തിലെന്നപോലെ നീല പശ്ചാത്തലം)

വെബ്‌സൈറ്റിൽ നിങ്ങൾക്ക് നിറങ്ങളുടെ പൂർണ്ണമായ ലിസ്റ്റ് കണ്ടെത്താം - (എസ്ടിഎം). നിറം മാറ്റാൻ, കോളണിന് ശേഷമുള്ള മൂല്യം മാറ്റി നിങ്ങളുടെ പരിശ്രമം ആസ്വദിക്കൂ.

ടെക്സ്ചർ ഉപയോഗിച്ച് ഒരു പശ്ചാത്തലം സൃഷ്ടിക്കുന്നു

സൈറ്റിനായി മനോഹരമായ ഒരു പശ്ചാത്തലം സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നതിനാൽ, ഈ രീതി അടുത്തിടെ പ്രത്യേകിച്ചും ജനപ്രിയമാണ്. ടെക്സ്ചറുകൾ ലളിതവും എന്നാൽ വളരെ മനോഹരവുമാണ്, അതിനാലാണ് അവ പലപ്പോഴും ഉപയോഗിക്കുന്നത്. ഏതെങ്കിലും ടെക്സ്ചർ കണക്റ്റുചെയ്യുന്നതിന്, നിങ്ങളുടെ സൈറ്റ് ഇൻസ്റ്റാൾ ചെയ്തിരിക്കുന്ന ഹോസ്റ്റിംഗിലെ ഇമേജ് ഫോൾഡറിലേക്ക് അത് അപ്ലോഡ് ചെയ്യേണ്ടതുണ്ട്. ഇതിനുശേഷം നിങ്ങൾ ഇനിപ്പറയുന്ന കോഡ് എഴുതണം:

പശ്ചാത്തല നിറം: #537759;

പശ്ചാത്തല-ചിത്രം: url (images/pattern.png);

ഈ കോഡിൽ നിറം നിലനിർത്തുന്നതിനുള്ള ഒരു പരിചിതമായ പാരാമീറ്ററും (ഇത് പച്ചയാണ്) പച്ച ടെക്സ്ചർ ബന്ധിപ്പിക്കുന്നതിന് ഉത്തരവാദിത്തമുള്ള ഒരു ഘടകവും അടങ്ങിയിരിക്കുന്നു.

ഒരു ഗ്രേഡിയൻ്റ് ഉപയോഗിച്ച് ഒരു പശ്ചാത്തലം ഉണ്ടാക്കുന്നു

css ഫംഗ്‌ഷനുകൾ ഉപയോഗിച്ച് ബന്ധിപ്പിച്ചിരിക്കുന്ന ഏത് ചിത്രവും തിരശ്ചീനമായും ലംബമായും (അക്ഷങ്ങൾക്കൊപ്പം) ആവർത്തിക്കാം എക്സ്ഒപ്പം വൈ). ഞങ്ങളുടെ സ്വന്തം കൈകളാൽ സൈറ്റിനായി ഏതെങ്കിലും ലളിതമായ പശ്ചാത്തലം സൃഷ്ടിക്കാൻ ഈ അവസരം ഞങ്ങളെ അനുവദിക്കുന്നു. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ 1 മെഗാപിക്സൽ വീതിയുള്ള ഗ്രേഡിയൻ്റ് സൃഷ്ടിക്കേണ്ടതുണ്ട് (ചുവടെയുള്ള ചിത്രം കാണുക), അത് ഒരു ഇമേജായി സംരക്ഷിച്ച് നിങ്ങളുടെ ഹോസ്റ്റിംഗിലേക്ക് അപ്‌ലോഡ് ചെയ്യുക. ഇതിനുശേഷം, നിങ്ങൾക്ക് ആവശ്യമായ കോഡ് എഴുതാം, അതായത്:

പശ്ചാത്തല നിറം: #83C5E9;

പശ്ചാത്തല-ചിത്രം: url (images/gradient.jpg);

പശ്ചാത്തലം-ആവർത്തനം: ആവർത്തിക്കുക-x;

ഈ സെറ്റിൽ, മുൻഗണനാ ക്രമത്തിൽ, പശ്ചാത്തല വർണ്ണത്തിന് ഉത്തരവാദിത്തമുള്ള ഒരു ഫംഗ്ഷൻ ഉണ്ട്, അത് ഞങ്ങൾ റീഇൻഷുറൻസിനായി ഉപയോഗിക്കുന്നു. ഇതിനുശേഷം, ഗ്രേഡിയൻ്റ് ബന്ധിപ്പിക്കുന്നതിന് ഉത്തരവാദിയായ ഒരു പരാമീറ്റർ, ഒടുവിൽ, X അക്ഷത്തിൽ ഗ്രേഡിയൻ്റ് ആവർത്തിക്കുന്നതിന് ഉത്തരവാദിത്തമുള്ള ഒരു ഫംഗ്ഷൻ.

വെബ്‌സൈറ്റ് പശ്ചാത്തലത്തിനായി ഒരു വലിയ ചിത്രം ഉപയോഗിക്കുന്നു

ഒരു പശ്ചാത്തലം സൃഷ്ടിക്കാൻ വിവിധ ചിത്രങ്ങൾ ഉപയോഗിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നതിനാൽ ഈ രീതി ഏറ്റവും ജനപ്രിയമായ രണ്ടാമത്തെതാണ്. ഈ രീതി നടപ്പിലാക്കാൻ, നിങ്ങൾ സൈറ്റിൻ്റെ ഇമേജ് ഫോൾഡറിലേക്ക് ഒരു വലിയ ചിത്രം അപ്‌ലോഡ് ചെയ്‌ത് ഇനിപ്പറയുന്ന കോഡ് നൽകേണ്ടതുണ്ട്:

പശ്ചാത്തല നിറം: #000000;

പശ്ചാത്തല-ചിത്രം: url (ചിത്രങ്ങൾ/ചിത്ര ശീർഷകം.jpg);

പശ്ചാത്തല-സ്ഥാനം: മധ്യഭാഗം;

പശ്ചാത്തലം-ആവർത്തനം: നോ-ആവർത്തനം;

ആദ്യ രണ്ട് പാരാമീറ്ററുകൾ ഉപയോഗിച്ച് എല്ലാം വ്യക്തമാണെങ്കിൽ, അവസാനത്തെ രണ്ട് കവർ ചെയ്യേണ്ടതുണ്ട്. സൈറ്റിൻ്റെ മധ്യഭാഗത്ത് ചിത്രം ശരിയാക്കാൻ മൂന്നാമത്തെ ഫംഗ്ഷൻ നിങ്ങളെ അനുവദിക്കുന്നു, കൂടാതെ അവസാന പാരാമീറ്റർ മുഴുവൻ പേജ് ഘടനയിലുടനീളം അതിൻ്റെ ആവർത്തനത്തെ തടയുന്നു.

ucoz വെബ്‌സൈറ്റുകളിലെ പശ്ചാത്തലം മാറ്റുന്നു

ഒരു സൈറ്റിനായി ഒരു പശ്ചാത്തലം സൃഷ്ടിക്കുന്നതിനുള്ള ആ രീതികൾ വ്യത്യസ്ത ഉള്ളടക്ക മാനേജ്മെൻ്റ് സിസ്റ്റങ്ങളിൽ ഉപയോഗിക്കാനാകും, എന്നാൽ സൈറ്റുകളിൽ അല്ല - ucoz. ucoz വെബ്‌സൈറ്റിൻ്റെ പശ്ചാത്തലം മാറ്റുന്നതിന്, നിങ്ങൾ സൈറ്റ് നിയന്ത്രണ പാനലിലേക്ക് പോകേണ്ടതുണ്ട്, ഇതിലേക്ക് പോകുക "ഡിസൈൻ മാനേജ്മെൻ്റ്", തുടർന്ന് അകത്ത് "ടെംപ്ലേറ്റുകൾ എഡിറ്റുചെയ്യുന്നു".

ഇപ്പോൾ നിങ്ങൾ സ്റ്റൈൽ ഷീറ്റ് (CSS) തുറക്കേണ്ടതുണ്ട്, ലൈൻ കണ്ടെത്തുക "ശരീരം"പരാമീറ്ററും "പശ്ചാത്തലം". ഇതിനുശേഷം, നിങ്ങൾ ലിങ്ക് പകർത്തേണ്ടതുണ്ട്, അത് നിങ്ങളുടെ ഇൻ്റർനെറ്റ് ബ്രൗസറിൽ ഒട്ടിക്കുക, പശ്ചാത്തലമായ ചിത്രത്തിലേക്ക് നിങ്ങൾക്ക് ആക്സസ് ലഭിക്കും.

ഒരു പുതിയ പശ്ചാത്തലം ഉപയോഗിക്കുന്നതിന്, നിങ്ങൾ അത് ഫയൽ മാനേജറിലേക്ക് അപ്‌ലോഡ് ചെയ്യേണ്ടതുണ്ട്. അതേ സമയം, പുതിയ പശ്ചാത്തല ചിത്രത്തിൻ്റെ പേര് മാറ്റത്തിന് മുമ്പുള്ള അതേ പേര് തന്നെയാണെന്ന് ഉറപ്പാക്കുക. നിങ്ങളുടെ ജോലി സംരക്ഷിച്ച്, ചെയ്ത ജോലി കാണുന്നതിന് വെബ്‌സൈറ്റിലേക്ക് പോകുക.

സൈറ്റിൻ്റെ പശ്ചാത്തലം HTML-ലേക്ക് മാറ്റുന്നു

ഒരു ഇമേജ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു html സൈറ്റിൽ പശ്ചാത്തലം നിർമ്മിക്കണമെങ്കിൽ, കോഡിലെ ലൈൻ നൽകുക:

നിങ്ങൾക്ക് സൈറ്റിൻ്റെ പശ്ചാത്തലം നിറം ഉപയോഗിച്ച് നിർമ്മിക്കണമെങ്കിൽ, ലൈൻ ഇതുപോലെയായിരിക്കണം:

ഇത് ഞങ്ങളുടെ കഥ അവസാനിപ്പിക്കുന്നു. ഒരു വെബ്‌സൈറ്റിനായി ഒരു പശ്ചാത്തലം എങ്ങനെ നിർമ്മിക്കാമെന്ന് ഇപ്പോൾ നിങ്ങൾക്കറിയാം. സന്തോഷകരമായ പദ്ധതികൾ!

വ്ലാഡ് മെർഷെവിച്ച്

വെബ് പേജുകളുടെ പ്രത്യേകതകൾ കാരണം, സൈറ്റ് ഡോക്യുമെൻ്റുകളുടെ ലേഔട്ടിൽ പശ്ചാത്തല ചിത്രങ്ങൾ ഒരു പ്രധാന പങ്ക് വഹിക്കുന്നു. അതേ സമയം, അവർ വിവിധ കാര്യങ്ങളിൽ സജീവമായി ഏർപ്പെട്ടിരിക്കുന്നു, ഉദാഹരണത്തിന്, ടെക്സ്റ്റിലേക്ക് ചിത്രങ്ങൾ അറ്റാച്ചുചെയ്യുന്ന പ്രക്രിയ ഓട്ടോമേറ്റ് ചെയ്യുന്നു, ഗ്രേഡിയൻ്റ് സംക്രമണങ്ങൾ സൃഷ്ടിക്കുന്നു, തീർച്ചയായും, ഉള്ളടക്കത്തിന് കീഴിൽ ഒരു പശ്ചാത്തലം ചേർക്കുന്നു. പശ്ചാത്തല ചിത്രങ്ങൾ ഉപയോഗിക്കുന്നതിൻ്റെ ചില വശങ്ങൾ ചുവടെയുണ്ട്.

ഒരു വെബ് പേജിലെ പശ്ചാത്തലം

ഒരു വെബ് പേജിലേക്ക് ഒരു പശ്ചാത്തല ചിത്രം സജ്ജീകരിക്കുന്നത് പരമ്പരാഗതമായി ടാഗിൻ്റെ പശ്ചാത്തല ആട്രിബ്യൂട്ട് വഴിയാണ് സംഭവിക്കുന്നത്. . ഈ പാറ്റേൺ തിരശ്ചീനമായും ലംബമായും ആവർത്തിക്കുന്നു, അങ്ങനെ മുഴുവൻ ബ്രൗസർ വിൻഡോയും പൂരിപ്പിക്കുന്നു. ഇവിടെ സർഗ്ഗാത്മകതയ്ക്ക് പ്രത്യേക ഓപ്ഷനുകളൊന്നുമില്ലെന്ന് വ്യക്തമാണ്, അതിനാൽ നമുക്ക് ശൈലികളിലേക്ക് തിരിയുകയും CSS ഉപയോഗിച്ച് എന്തുചെയ്യാനാകുമെന്ന് നോക്കാം.

പശ്ചാത്തല ചിത്രത്തെ നിയന്ത്രിക്കുന്ന അഞ്ച് ആട്രിബ്യൂട്ടുകൾ CSS-നുണ്ട്: അതിൻ്റെ കൂട്ടിച്ചേർക്കൽ, സ്ഥാനം, ആവർത്തനം. എന്നിരുന്നാലും, ഈ എല്ലാ പാരാമീറ്ററുകളും ഒരു സാർവത്രിക സ്വത്ത് ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുന്നു, പശ്ചാത്തലം , അത് ഞങ്ങൾ ഭാവിയിൽ ഉപയോഗിക്കും.

ഒരു വാൾപേപ്പർ ചേർക്കുന്നു

url കീവേഡ് ഉപയോഗിച്ച് ചിത്രത്തിൻ്റെ വിലാസം സജ്ജീകരിക്കുന്നതിലൂടെ ഒരു ചിത്രം ചേർക്കുന്നത് സംഭവിക്കുന്നു. ഒരു ചിത്രത്തിൻ്റെ ആവർത്തനം നിയന്ത്രിക്കുന്നതിന്, നോ-ആവർത്തനം, ആവർത്തിക്കുക-x (തിരശ്ചീനമായി ആവർത്തിക്കുക), ആവർത്തിക്കുക-y (ലംബമായി ആവർത്തിക്കുക) എന്നീ ആർഗ്യുമെൻ്റുകൾ ഉപയോഗിക്കുന്നു. ഇതിന് നന്ദി, ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്ന വെബ് പേജ് നിങ്ങൾക്ക് ലഭിക്കും. 1.

ഒരു വെബ് പേജിലേക്ക് ഒരു ഇമേജ് സജ്ജീകരിക്കുന്നതിന്, ഉദാഹരണം 1-ൽ കാണിച്ചിരിക്കുന്നതുപോലെ, നിങ്ങൾ BODY സെലക്ടറിലേക്ക് ഒരു പശ്ചാത്തല ശൈലിയിലുള്ള പ്രോപ്പർട്ടി ചേർക്കേണ്ടതുണ്ട്.

ഉദാഹരണം 1: പശ്ചാത്തല ചിത്രം

ഈ ഉദാഹരണത്തിൽ, ചിത്രം ആവർത്തിക്കാതെ തന്നെ വെബ് പേജിൻ്റെ പശ്ചാത്തലമായി ഗ്രാഫിക് target.gif നിർവചിച്ചിരിക്കുന്നു. ചിത്രം ബ്രൗസറിൻ്റെ അരികുകളിൽ ദൃഡമായി ഘടിപ്പിക്കുന്നത് തടയാൻ, അത് അതിൻ്റെ യഥാർത്ഥ സ്ഥാനത്ത് നിന്ന് 30 പിക്സലുകൾ വലത്തോട്ടും 20 പിക്സലുകൾ താഴേക്കും മാറ്റുന്നു.

ഒരു പാറ്റേൺ ആവർത്തിക്കുന്നു

തിരശ്ചീനമായോ ലംബമായോ ആവർത്തിക്കാൻ നിങ്ങൾക്ക് പശ്ചാത്തല പാറ്റേൺ സജ്ജമാക്കാൻ കഴിയുമെന്നതിനാൽ, വെബ് പേജുകളുടെ രൂപകൽപ്പനയ്ക്ക് നിരവധി ഓപ്ഷനുകൾ ലഭ്യമാണ്. ഉദാഹരണത്തിന്, ഇടത് അരികിൽ (ചിത്രം 2) ഒരു ലംബ വര സൃഷ്ടിക്കാൻ, ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്ന ചിത്രം നിങ്ങൾക്ക് ആവശ്യമാണ്. 3.

ശ്രദ്ധേയമായ സീമുകളില്ലാതെ ലംബമായി യോജിക്കുന്ന തരത്തിലായിരിക്കണം ഡിസൈൻ, കൂടാതെ വെബ് പേജിൻ്റെ നിർദ്ദിഷ്‌ട പശ്ചാത്തല വർണ്ണം ഉപയോഗിച്ച് ഒരൊറ്റ മൊത്തത്തിൽ രൂപപ്പെടുത്തുകയും വേണം. ഉദാഹരണം 2, ബാക്ക്ഗ്രൗണ്ട് പ്രോപ്പർട്ടിയും അതിൻ്റെ ആവർത്തന-y മൂല്യവും ഉപയോഗിച്ച്, അത്തരമൊരു പശ്ചാത്തല ഇമേജ് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് കാണിക്കുന്നു.

ഉദാഹരണം 2. പശ്ചാത്തലം ലംബമായി ആവർത്തിക്കുന്നു

അതുപോലെ, നിങ്ങൾക്ക് പശ്ചാത്തലം തിരശ്ചീനമായി ആവർത്തിക്കാം, ഉദാഹരണത്തിന്, ഒരു ഗ്രേഡിയൻ്റ് സൃഷ്ടിച്ച് അതിനെ ഒരു പശ്ചാത്തല ഇമേജായി സജ്ജമാക്കുക (ചിത്രം 4).

ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്ന വെബ് പേജ് ലഭിക്കാൻ. 4, നിങ്ങൾ ആദ്യം ഗ്രേഡിയൻ്റ് ട്രാൻസിഷൻ ഉപയോഗിച്ച് ഒരു ചിത്രം നിർമ്മിക്കേണ്ടതുണ്ട്. 20-40 പിക്സലുകൾ വ്യക്തമാക്കാൻ വീതി മതിയാകും, കൂടാതെ ചിത്രത്തിൻ്റെ ഉയരം ഡോക്യുമെൻ്റിൻ്റെ ഉദ്ദേശ്യത്തെയും വെബ് പേജിൻ്റെ ഉള്ളടക്കത്തിൻ്റെ പ്രതീക്ഷിക്കുന്ന ഉയരത്തെയും ആശ്രയിച്ചിരിക്കുന്നു. ഒരു വലിയ ഡ്രോയിംഗ് ഗ്രാഫിക് ഫയലിൻ്റെ വലുപ്പം വർദ്ധിപ്പിക്കുമെന്നതും മറക്കരുത്. ഇത് അതിൻ്റെ ലോഡിംഗ് വേഗതയെ പ്രതികൂലമായി ബാധിക്കുകയും ആത്യന്തികമായി, മന്ദഗതിയിലുള്ള പശ്ചാത്തല പ്രദർശനത്തിലേക്ക് നയിക്കുകയും ചെയ്യും. ഈ സാഹചര്യത്തിൽ, 30x200 പിക്സലുകളുടെ ഒരു ചിത്രം തികച്ചും അനുയോജ്യമാണ് (ചിത്രം 5).

ഗ്രേഡിയൻ്റ് പശ്ചാത്തലം സൃഷ്ടിക്കുന്നതിനുള്ള HTML കോഡ് ഉദാഹരണം 3 കാണിക്കുന്നു.

ഉദാഹരണം 3: പശ്ചാത്തലം തിരശ്ചീനമായി ആവർത്തിക്കുന്നു

ഒരു ഗ്രേഡിയൻ്റ് ഡിസൈൻ സോളിഡ് കളർ ബ്ലോക്കിനൊപ്പം നന്നായി പോകുന്നു, അതിനാൽ ഈ ഉദാഹരണത്തിൽ വെബ് പേജിൻ്റെ ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്നതിന് ഞങ്ങൾ ഒരു ലെയർ ചേർക്കുന്നു.

ടെക്സ്റ്റിലേക്ക് ഒരു ചിത്രം ചേർക്കുന്നു

ഒരു പശ്ചാത്തല ചിത്രം ഉപയോഗിക്കുന്നതിലൂടെ, തലക്കെട്ടുകൾ പോലെയുള്ള നിർദ്ദിഷ്ട ടെക്സ്റ്റിലേക്ക് ഗ്രാഫിക്സ് ചേർക്കുന്ന പ്രക്രിയ നിങ്ങൾക്ക് ഓട്ടോമേറ്റ് ചെയ്യാൻ കഴിയും. ഇത് ചെയ്യുന്നതിന്, പശ്ചാത്തല സാർവത്രിക പ്രോപ്പർട്ടി ഉപയോഗിക്കുക, അത് ആവശ്യമുള്ള സെലക്ടറിലേക്ക് പ്രയോഗിക്കുന്നു. മൂല്യം ചിത്രത്തിലേക്കുള്ള പാതയാണ്, അത് ആവർത്തിക്കാതിരിക്കാൻ, ആവർത്തിക്കാത്ത വാദം (ഉദാഹരണം 4).

ഉദാഹരണം 4: ഒരു ചിത്രം ചേർക്കുന്നു

തലക്കെട്ട്

പ്രധാന വാചകം

ഈ ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ, ഡ്രോയിംഗ് അതിൻ്റെ യഥാർത്ഥ സ്ഥാനത്ത് നിന്ന് തിരശ്ചീനമായും ലംബമായും നീക്കാൻ കഴിയും, സ്ഥിരസ്ഥിതിയായി ഇത് ബ്ലോക്ക് മൂലകത്തിൻ്റെ മുകളിൽ ഇടത് കോണാണ്. ആവശ്യമുള്ള രീതിയിൽ ടെക്സ്റ്റുമായി ബന്ധപ്പെട്ട് ചിത്രം സ്ഥാപിക്കാൻ പശ്ചാത്തല ഷിഫ്റ്റ് നിങ്ങളെ അനുവദിക്കുന്നു. ചിത്രം ഓവർലാപ്പ് ചെയ്യുന്നതിൽ നിന്ന് ടെക്സ്റ്റ് തടയാൻ, നിങ്ങൾ പാഡിംഗ്-ഇടത് പ്രോപ്പർട്ടി ചേർക്കണം, അതുകൊണ്ടാണ് നിർദ്ദിഷ്ട ദൂരത്തിൽ ടെക്സ്റ്റ് വലത്തേക്ക് മാറ്റുന്നത്. ഇത് ഓരോ സാഹചര്യത്തിലും വ്യക്തിഗതമാണ്, സാധാരണയായി ചിത്രത്തിൻ്റെ വീതിയും ചിത്രത്തിനും വാചകത്തിനും ഇടയിലുള്ള ആവശ്യമുള്ള ഇടത്തിനും തുല്യമാണ്.