ഒരു വെബ് പേജിൽ പശ്ചാത്തല വാട്ടർമാർക്ക് സൃഷ്ടിക്കുന്നതിനുള്ള നുറുങ്ങുകൾ

സാങ്കേതികവിദ്യ ഉപയോഗിച്ച് CSS നടപ്പിലാക്കുക

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

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

ആമുഖം

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

ഈ വലിയ പശ്ചാത്തല ചിത്രങ്ങൾ ഇനിപ്പറയുന്ന മൂന്ന് CSS സ്റ്റൈൽ പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് സൃഷ്ടിക്കാൻ എളുപ്പമാണ്:

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

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

പശ്ചാത്തല-ഇമേജ്: url (/images/page-background.jpg);

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

അഡോബി ഫോട്ടോഷോപ്പ് പോലുള്ള എഡിറ്റിങ് പ്രോഗ്രാമിൽ നിങ്ങൾക്ക് പശ്ചാത്തല ഇമേജ് ക്രമീകരിക്കാനാകും.

പശ്ചാത്തല-ആവർത്തിക്കുക

പശ്ചാത്തല-ആവർത്തന സ്വത്ത് അടുത്തത് വരും. നിങ്ങളുടെ ചിത്രം ഒരു വലിയ വാട്ടർമാർക്ക്-ശൈലി ഗ്രാഫിക്കായിരിക്കണമെങ്കിൽ, ആ ഇമേജ് ഒരിക്കൽ മാത്രം പ്രദർശിപ്പിക്കുന്നതിന് നിങ്ങൾ ഈ വസ്തു ഉപയോഗിക്കും.

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

"നോ-ആവർത്തിക്കുന്ന" വസ്തുവല്ലാതെ സ്വതന്ത്രം ആ ചിത്രത്തിൽ വീണ്ടും വീണ്ടും ആവർത്തിക്കുമെന്നതാണ്. ഇത് മിക്ക ആധുനിക വെബ്പേജ് ഡിസൈനിലും രസകരമാണ്, അതിനാൽ ഈ രീതി നിങ്ങളുടെ CSS- ൽ അത്യാവശ്യമായി കണക്കാക്കണം.

പശ്ചാത്തല-അറ്റാച്ചുമെന്റ്

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

ഈ പ്രോപ്പർട്ടിക്ക് സ്വതവേയുള്ള മൂല്യം "സ്ക്രോൾ" ആണ്. നിങ്ങൾ ഒരു പശ്ചാത്തല അറ്റാച്ചുമെന്റ് മൂല്യം വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, പശ്ചാത്തലവും പേജിന്റെ ബാക്കിയുള്ള സ്ക്രോൾ ചെയ്യും.

പശ്ചാത്തല അറ്റാച്ചുമെന്റ്: ഫിക്സഡ്;

പശ്ചാത്തല വലുപ്പം

പശ്ചാത്തല വലുപ്പം ഒരു പുതിയ CSS പ്രോപ്പർട്ടി ആണ്. ഇത് കാണുന്ന വ്യൂപോർട്ട് അടിസ്ഥാനമാക്കി ഒരു പശ്ചാത്തല വലുപ്പത്തെ സജ്ജമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു . വിവിധ ഉപകരണങ്ങളിൽ വിവിധ വലുപ്പങ്ങളിൽ പ്രദർശിപ്പിക്കുന്ന പ്രതികരിക്കുന്ന വെബ്സൈറ്റുകൾക്ക് ഇത് വളരെ സഹായകരമാണ്.

പശ്ചാത്തല വലുപ്പം: കവർ;

ഈ വസ്തുവിനായി നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്ന രണ്ട് സഹായകരമായ മൂല്യങ്ങൾ:

നിങ്ങളുടെ പേജിലേക്ക് CSS ചേർക്കുന്നു

മുകളിലുള്ള ഗുണങ്ങളും അവയുടെ മൂല്യങ്ങളും മനസ്സിലാക്കിയ ശേഷം, ഈ ശൈലികൾ നിങ്ങളുടെ വെബ്സൈറ്റിൽ ചേർക്കാം.

നിങ്ങൾ ഒരു പേജ് സൈറ്റ് നിർമ്മിക്കുകയാണെങ്കിൽ നിങ്ങളുടെ വെബ്പേജിന്റെ HEAD ൽ ചേർക്കുക. നിങ്ങൾ ഒരു മൾട്ടി-പേജ് സൈറ്റ് നിർമ്മിക്കുകയും ഒരു ബാഹ്യ ഷീറ്റിൻറെ ശക്തി പ്രയോജനപ്പെടുത്താൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ ഇത് ഒരു ബാഹ്യ ശൈലി ഷീറ്റിന്റെ CSS ശൈലികളിൽ ചേർക്കുക.