सीएसएस सोबत तंत्र कार्यान्वित करा
आपण वेबसाइट डिझाइन करत असल्यास, आपल्याला एका वेब पृष्ठावर निश्चित पार्श्वभूमी प्रतिमा किंवा वॉटरमार्क कसा तयार करायचा हे जाणून घेण्यात स्वारस्य असू शकते. हे एक सामान्य डिझाइन उपचार आहे जे बर्याच काळापासून ऑनलाइन लोकप्रिय आहे. आपल्या वेब डिझाईन पिशव्यामध्ये हे एक सुलभ परिणाम आहे.
आपण यापूर्वी किंवा नशिब न करता यापूर्वी प्रयत्न केला नसल्यास, प्रक्रिया डरायला वाटू शकते, परंतु प्रत्यक्षात हे सर्व फार कठीण नाही. या संक्षिप्त ट्युटोरियलमध्ये, आपल्याला सीएसएस वापरून मिनिटच्या एका टप्प्यामध्ये तंत्रज्ञानावर माहीती घेण्याची गरज आहे.
प्रारंभ करणे
पार्श्वभूमी प्रतिमा किंवा वॉटरमार्क (जे खरोखरच केवळ अत्यंत प्रकाश पार्श्वभूमी आहेत) मुद्रित केलेल्या डिझाइनमध्ये इतिहास आहे. कॉपी करण्यापासून रोखण्यासाठी दस्तऐवजांवर त्यांच्यावरील वॉटरमार्कचा समावेश आहे. याव्यतिरिक्त, मुद्रित तुकडासाठी डिझाइनचा एक भाग म्हणून अनेक फ्लायर आणि ब्रोशर्स मोठ्या पार्श्वभूमीच्या प्रतिमा वापरतात. वेब डिझाइनने प्रिंट आणि पार्श्वभूमी प्रतिमांमधून शैली बरेचदा घेतलेली आहे. या कर्जाच्या शैलींपैकी एक आहे
या मोठ्या पार्श्वभूमीच्या प्रतिमा खालील तीन CSS शैली गुणधर्मांचा वापर करून तयार करणे सोपे आहे:
- पार्श्वभूमी-प्रतिमा
- पार्श्वभूमी-पुनरावृत्ती
- पार्श्वभूमी-संलग्नक
- पार्श्वभूमी-आकार
पार्श्वभूमी-प्रतिमा
आपल्या वॉटरमार्क म्हणून वापरल्या जाणार्या इमेजची व्याख्या करण्यासाठी आपण पार्श्वभूमी-प्रतिमा वापरणार. ही शैली आपल्या साइटवर असलेली प्रतिमा लोड करण्यासाठी फक्त फाइल पथ वापरते, संभवतः "प्रतिमा" नावाची निर्देशिका असते.
पार्श्वभूमी-प्रतिमा: url (/images/page-background.jpg);
हे महत्वाचे आहे की प्रतिमा केवळ सामान्य प्रतिमेपेक्षा फिकट किंवा अधिक पारदर्शक आहे. यामुळे वेब पृष्ठाच्या मजकूर, ग्राफिक्स आणि इतर मुख्य घटकांमधले एक अर्ध-पारदर्शी प्रतिमा असलेले "वॉटरमार्क" स्वरूप तयार होईल. या चरणाशिवाय, पार्श्वभूमी प्रतिमा आपल्या पृष्ठावरील माहितीशी स्पर्धा करेल आणि ती वाचण्यास अवघड करेल.
आपण अॅडोब फोटोशॉप सारख्या कोणत्याही संपादन प्रोग्राममध्ये पार्श्वभूमी प्रतिमा समायोजित करू शकता.
पार्श्वभूमी-पुनरावृत्ती
पार्श्वभूमी-पुनरावृत्ती ठिकाण पुढील येतो आपण आपली प्रतिमा मोठी वॉटरमार्क-शैली ग्राफिक इच्छित असल्यास, आपण त्या मालमत्तेचा वापर त्या प्रतिमा फक्त एकदाच प्रदर्शित करण्यासाठी करणार आहात
पार्श्वभूमी-पुनरावृत्ती: नाही-पुनरावृत्ती;
"नो-पुनरावृत्ती" प्रॉपर्टीशिवाय, डिफॉल्ट असे आहे की इमेज पानावर वारंवार पुनरावृत्ती होईल. हे बहुतांश आधुनिक वेब पृष्ठ डिझाइनमध्ये अनिष्ट आहे, म्हणून ही शैली आपल्या सीएसएसमध्ये आवश्यक मानली पाहिजे.
पार्श्वभूमी-संलग्नक
पार्श्वभूमी-संलग्नक एक अशी मालमत्ता आहे जी बर्याच वेब डिझायनर्सबद्दल विसरून जाते. आपण "निश्चित" गुणधर्मांचा वापर करता तेव्हा हे वापरणे आपल्या पार्श्वभूमीची प्रतिमा जागेवर ठेवते. जे पृष्ठावर निर्धारण केले जाते त्या वॉटरमार्कमध्ये ते प्रतिमा वळवते.
या मालमत्तेसाठी डिफॉल्ट मूल्य "स्क्रोल" आहे. आपण पार्श्वभूमी-संलग्नक मूल्य निर्दिष्ट केले नसल्यास, पार्श्वभूमी पृष्ठाच्या उर्वरित बाजूने स्क्रोल करेल.
पार्श्वभूमी-संलग्नक: निश्चित;
पार्श्वभूमी-आकार
पार्श्वभूमी-आकार एक नवीन CSS गुणधर्म आहे हे आपण पाहत असलेल्या व्ह्यूपोर्टवर आधारीत पार्श्वभूमीचा आकार सेट करण्यास परवानगी देते. हे अत्यंत संवेदनशील वेबसाइटसाठी उपयुक्त आहे जे विविध डिव्हाइसेसवर वेगवेगळ्या आकारात प्रदर्शित होईल.
पार्श्वभूमी-आकार: कव्हर;
या मालमत्तेसाठी आपण वापरु शकता असे दोन उपयुक्त मूल्ये:
- झाकण - पार्श्वभूमी तराजूते म्हणून एकतर पूर्ण रूंदी किंवा पूर्ण उंची दर्शविली जाते. याचा अर्थ प्रतिमाच्या काही भाग स्क्रीनवर दिसणार नाहीत परंतु संपूर्ण क्षेत्राचा समावेश केला जाईल.
- समाविष्ट - प्रतिमाचित्रास लागतो त्यामुळे संपूर्ण रुंदी आणि उंची शैली टाईलेल्या क्षेत्रात दर्शविली जाते. प्रतिमा कापली जात नाही, परंतु निंदातील हे आहे की क्षेत्राच्या काही भागावर छायाचित्र नाही.
आपल्या पृष्ठावर सीएसएस जोडणे
आपण वरील गुणधर्म आणि त्यांचे मूल्य समजून घेतल्यानंतर, आपण या शैली आपल्या वेबसाइटवर जोडू शकता
आपण एक पृष्ठ-साइट तयार करत असल्यास आपल्या वेब पृष्ठाच्या HEAD मध्ये ते जोडा. आपण एकाधिक-पृष्ठ साइट तयार करत असल्यास आणि बाह्य शीटच्या शक्तीचा लाभ घेऊ इच्छित असल्यास ती बाह्य शैली पत्रकाच्या CSS शैलींमध्ये जोडा