मालवेअर हे अनाहूत किंवा धोकादायक प्रोग्राम आहेत जे...
मला वाटते की अशी एकही साइट नाही जिथे मालमत्ता वापरली जात नाही CSS पार्श्वभूमी
. असे दिसते की या मालमत्तेपेक्षा सोपे काय असू शकते? पण नाही, त्याची क्षमता पृष्ठ पार्श्वभूमी म्हणून चित्र किंवा रंगाच्या नेहमीच्या असाइनमेंटपेक्षा खूप विस्तृत आहे. काही गोष्टी परिचित असतील, तर इतर कदाचित अनेकांसाठी नवीन असतील. कोणत्याही परिस्थितीत, पार्श्वभूमी कशी कार्य करते हे पूर्णपणे जाणून घेणे उपयुक्त ठरेल.
CSS3 ने मालमत्तेत बऱ्याच नवीन गोष्टी आणल्या आहेत, जसे की पारदर्शकता आणि पार्श्वभूमी म्हणून अनेक प्रतिमा नियुक्त करणे, परंतु आम्ही खाली याबद्दल बोलू, परंतु प्रथम आम्ही मालमत्तेच्या मूलभूत गोष्टी पाहू. पार्श्वभूमी.
पार्श्वभूमी-रंग
मला खात्री आहे की तुम्ही आधीच पार्श्वभूमीचा रंग एकापेक्षा जास्त वेळा नियुक्त केला आहे. हे अनेक प्रकारचे नोटेशन वापरून केले जाऊ शकते: नियमित (रंगाचे नाव वापरले जाते), हेक्साडेसिमल किंवा आरजीबी नोटेशन. प्रत्येक प्रकार समतुल्य आहे, तुम्हाला जे आवडेल ते वापरा. मी सर्वात लहान पर्याय वापरण्याचा प्रयत्न करतो आणि सोप्या आकलनासाठी, परिणामी शैली फाइल आकाराने थोडी लहान आहे.
P (पार्श्वभूमी-रंग: लाल;) p (पार्श्वभूमी-रंग: #f00;) p (पार्श्वभूमी-रंग: #ff0000;) p (पार्श्वभूमी-रंग: rgb(255, 0, 0;))
CSS3 पारदर्शकतेचे समर्थन करते, म्हणून आम्ही ते आमच्या रंगात जोडू शकतो, उदाहरणार्थ यासारखे:
P (पार्श्वभूमी-रंग: rgba(255, 0, 0, 0.5);)
शेवटच्या आकृतीने पारदर्शकता 50% वर सेट केली. तुम्ही पारदर्शकता मूल्य 0 (पूर्णपणे पारदर्शक पार्श्वभूमी) वरून 1 (पूर्णपणे अपारदर्शक) वर सेट करू शकता.
पार्श्वभूमी-प्रतिमा
या गुणधर्माचा वापर खूप वेळा केला जातो; CSS3 ने पार्श्वभूमीला एकाधिक प्रतिमा नियुक्त करण्याची क्षमता जोडली आहे, प्रत्येकाने स्वतःचा स्तर तयार केला आहे, त्यामुळे प्रत्येक पुढील एक मागील एक ओव्हरलॅप करते. हे उपयुक्त का असू शकते? सर्व काही अगदी सोपे आहे - समजा आपल्याला साइटच्या प्रत्येक कोपर्यात लहान फ्रिल्स स्क्रू करणे आवश्यक आहे. कमी-अधिक रबरी लेआउट दिल्यास, एक प्रतिमा वापरणे हा पर्याय नाही. म्हणून, आम्ही 4 "स्तर" बनवतो, प्रत्येक प्रतिमा त्याच्या स्वतःच्या कोपर्यात हलवतो आणि इतकेच, समस्या सोडवली जाते
मुख्य भाग (पार्श्वभूमी-प्रतिमा: url("image1"), url("image2"), url("image3"))
जर तुम्हाला पार्श्वभूमीला एक प्रतिमा नियुक्त करायची असेल, तर आम्ही कोडमध्ये फक्त पहिलीच सोडतो, मला वाटते की हे समजण्यासारखे आहे.
पार्श्वभूमी म्हणून कोणतीही प्रतिमा वापरताना, आपण दोन नियम लक्षात ठेवले पाहिजेत:
- वापरकर्त्याला काही कारणास्तव प्रतिमा दिसत नसल्यास विरोधाभासी पार्श्वभूमी रंग सेट करा. हे फक्त चित्रांचे प्रदर्शन बंद करू शकते, रहदारी वाचवू शकते.
- कोणतीही माहिती देण्यासाठी पार्श्वभूमी प्रतिमा वापरू नका महत्वाची माहिती. वर नमूद केलेल्या कारणांमुळे, वापरकर्त्याला ते दिसणार नाही.
एकाधिक पार्श्वभूमी प्रतिमांसाठी समर्थन खूप विस्तृत आहे. सर्व ब्राउझर, अगदी IE8, या मालमत्तेचे समर्थन करतात.
म्हणून वापरली जाणारी प्रतिमा निर्दिष्ट करते पार्श्वभूमी चित्रटेबल पेशी. विपरीत नियमित प्रतिमा, पार्श्वभूमीला रुंदी किंवा उंची सेट नाही आणि 100% स्केलवर नेहमी पूर्ण आकारात प्रदर्शित केले जाते. जर चित्र सेलच्या रुंदी किंवा उंचीपेक्षा आकाराने लहान असेल, तर चित्र उजवीकडे आणि खाली क्षैतिजरित्या पुनरावृत्ती होते, मोज़ेकसारखे रेखाटले जाते. या कारणास्तव, जंक्शन येथे पार्श्वभूमी चित्रेसाइट अभ्यागतांना लक्षात येण्याजोगे दृश्यमान फरक उद्भवू शकतात. पार्श्वभूमी प्रतिमा निवडताना, ती आणि सेलमधील सामग्रीमध्ये पुरेसा कॉन्ट्रास्ट असल्याची खात्री करा. पार्श्वभूमी म्हणून ॲनिमेटेड प्रतिमा वापरणे देखील शक्य आहे. GIF स्वरूप, पण ते वाचकांचे लक्ष विचलित करतात.
मांडणी
मूल्ये
कोणताही वैध प्रतिमा पत्ता - तुम्ही सापेक्ष किंवा निरपेक्ष मार्ग वापरू शकता.
डीफॉल्ट मूल्य
उदाहरण
| पार्श्वभूमी पॅटर्नसह सेल |
नोंद
सेल वापरासाठी पार्श्वभूमी प्रतिमा सेट करण्यासाठी शैली मालमत्ता td किंवा th सिलेक्टरमध्ये जोडून पार्श्वभूमी.
| ... |
ब्राउझर
खालील नोटेशन्स ब्राउझर टेबलमध्ये वापरल्या जातात.
- - घटक ब्राउझरद्वारे पूर्णपणे समर्थित आहे;
- - घटक ब्राउझरद्वारे समजला जात नाही आणि त्याकडे दुर्लक्ष केले जाते;
- - ऑपरेशन दरम्यान दिसू शकते विविध त्रुटी, किंवा आयटम आरक्षणासह समर्थित आहे.
संख्या ब्राउझर आवृत्ती दर्शवते ज्यामधून घटक समर्थित आहे.
CSS3 च्या आगमनाने, लेआउट डिझाइनर्सचे कार्य बऱ्याच मार्गांनी सोपे आणि अधिक तार्किक बनले आहे: सर्व केल्यानंतर, आता आपण कमी आणि कमी जावास्क्रिप्टचा अवलंब करून कोणतीही ऑब्जेक्ट खरोखर लवचिकपणे कॉन्फिगर करू शकता. समजा तुम्हाला पार्श्वभूमीची पारदर्शकता समायोजित करण्याची आवश्यकता आहे - CSS तत्काळ अनेक पर्याय ऑफर करते.
पार्श्वभूमी गुणधर्मांच्या संचाद्वारे निर्दिष्ट केली जाते, पार्श्वभूमी-पुनरावृत्ती, पार्श्वभूमी-संलग्नक, पार्श्वभूमी-मूळ, पार्श्वभूमी-क्लिप, पार्श्वभूमी-रंग), आणि त्यापैकी प्रत्येक स्वतंत्रपणे निर्दिष्ट केला जाऊ शकतो किंवा पार्श्वभूमी विशेषता अंतर्गत एकत्र केला जाऊ शकतो. चला त्या प्रत्येकाकडे अधिक तपशीलवार पाहूया.
पार्श्वभूमी-रंग विशेषता
जरी IE8 या पद्धतीचे समर्थन करते. जेव्हा पार्श्वभूमी म्हणून एकाधिक प्रतिमा वापरल्या जातात रबर लेआउट. सर्वात महत्त्वाचे म्हणजे, कोणतीही प्रतिमा वापरताना, CSS मध्ये पार्श्वभूमी रंग सेट करण्यास विसरू नका, कारण वापरकर्ते प्रतिमा लोड करू शकत नाहीत.
पार्श्वभूमी-स्थिती विशेषता
तुम्ही ब्लॉकची पार्श्वभूमी सेट करण्यासाठी इमेज वापरल्यास, CSS तुम्हाला स्क्रीनवर कुठेही इमेज ठेवण्याची परवानगी देईल. डीफॉल्टनुसार, प्रतिमा डावीकडे स्थित आहे वरचा कोपरा. विशेषता एकतर शाब्दिक संकेत (वर, खाली, डावीकडे, उजवीकडे) किंवा संख्यात्मक (टक्केवारी, पिक्सेल आणि मोजमापाची इतर एकके) स्वीकारते. या प्रकरणात, आपल्याला दोन मूल्ये निर्दिष्ट करण्याची आवश्यकता आहे: क्षैतिज आणि अनुलंब:
शरीर (पार्श्वभूमी-स्थिती: उजवे केंद्र;) - या उदाहरणामध्ये, पार्श्वभूमी पृष्ठाच्या उजव्या बाजूला स्थित असेल आणि तळापासून आणि वरपासून प्रतिमेपर्यंतचे अंतर समान असेल.
पार्श्वभूमी-आकार विशेषता
कधी कधी सह आवश्यक CSS वापरूनपार्श्वभूमी ताणा किंवा त्याचा आकार कमी करा. हे करण्यासाठी, पार्श्वभूमी-आकार विशेषता वापरा आणि पार्श्वभूमी आकार एकतर पिक्सेल किंवा टक्केवारीत किंवा मापनाच्या इतर कोणत्याही युनिटमध्ये सेट केला जाऊ शकतो.
या विशेषतामध्ये काही समस्या आहेत: ब्राउझरच्या पूर्वीच्या आवृत्त्यांमध्ये पार्श्वभूमी योग्यरित्या प्रदर्शित करण्यासाठी, उपसर्ग वापरणे आवश्यक आहे. नक्कीच, वर्तमान आवृत्त्याया विशेषताला पूर्णपणे समर्थन देते आणि विशिष्ट गुणधर्मांची आवश्यकता नाहीशी झाली आहे.
पार्श्वभूमी-संलग्नक विशेषता
हे गुणधर्म वर्तन निर्दिष्ट करते पार्श्वभूमी प्रतिमास्क्रोल करताना. तर, यास 3 मूल्ये लागू शकतात (वारसा विचारात न घेता, जे या लेखात सादर केलेल्या सर्व गुणधर्मांसाठी सामान्य आहे):
- निश्चित- पार्श्वभूमी विरुद्ध चित्र गतिहीन करते;
- स्क्रोल करा— इतर घटकांसह पार्श्वभूमी स्क्रोल;
- स्थानिक— सामग्रीमध्ये स्क्रोलिंग असल्यास पार्श्वभूमी प्रतिमा स्क्रोल करते. सामग्रीच्या पलीकडे विस्तारणारी पार्श्वभूमी निश्चित केली आहे.
वापर उदाहरण:
शरीर (पार्श्वभूमी-संलग्नक निश्चित).
फायरफॉक्स सध्या शेवटच्या मालमत्तेला (स्थानिक) समर्थन देत नाही.
पार्श्वभूमी-मूळ विशेषता
ही विशेषता घटकाच्या स्थितीसाठी जबाबदार आहे. ब्राउझर पूर्वीच्या आवृत्त्याउपसर्ग वापरणे आवश्यक आहे. मालमत्तेमध्ये स्वतःच तीन पॅरामीटर्स आहेत:
- पॅडिंग बॉक्सफ्रेमची जाडी लक्षात घेऊन काठाशी संबंधित पार्श्वभूमी स्थित करते;
- सीमा बॉक्समागील मालमत्तेपेक्षा भिन्न आहे की सीमारेषा पार्श्वभूमी पूर्णपणे किंवा अंशतः ओव्हरलॅप करू शकते;
- सामग्री बॉक्सप्रतिमेला स्थान देते, ती सामग्रीशी लिंक करते.
एकाधिक मूल्ये निर्दिष्ट केल्यास, ब्राउझर वेगळ्या प्रकारे प्रतिक्रिया देऊ शकतात: फायरफॉक्स आणि ऑपेरा फक्त पहिला पर्याय स्वीकारतात.
पार्श्वभूमी-पुनरावृत्ती विशेषता
नियमानुसार, जर पार्श्वभूमी एखाद्या प्रतिमेद्वारे दिली असेल, तर ती क्षैतिज किंवा अनुलंबपणे पुनरावृत्ती करावी. पार्श्वभूमी-पुनरावृत्ती विशेषता यासाठी वापरली जाते. अशाप्रकारे, ज्या ब्लॉकच्या CSS मध्ये अशी प्रॉपर्टी आहे त्या ब्लॉकच्या पार्श्वभूमीमध्ये अनेक पॅरामीटर्सपैकी एक असू शकतो:
- पुनरावृत्ती नाही— प्रतिमा एका आवृत्तीमध्ये पृष्ठावर दिसते;
- पुनरावृत्ती— पार्श्वभूमी x आणि y अक्षांसह पुनरावृत्ती केली जाते;
- पुनरावृत्ती-x- फक्त क्षैतिज;
- पुनरावृत्ती-y- फक्त अनुलंब;
- जागा— पार्श्वभूमीची पुनरावृत्ती होते, परंतु जर जागा भरली जाऊ शकत नाही, तर चित्रांमध्ये रिक्त जागा दिसतात;
- गोल— संपूर्ण क्षेत्र संपूर्ण चित्रांनी भरणे शक्य नसल्यास प्रतिमा मोजली जाते.
विशेषता वापराचे उदाहरण:
शरीर (पार्श्वभूमी-पुनरावृत्ती: पुनरावृत्ती नाही-पुनरावृत्ती)- समान पार्श्वभूमी-पुनरावृत्ती: पुनरावृत्ती-y.
CSS3 मध्ये, आपण स्वल्पविरामाने विभक्त केलेल्या पॅरामीटर्सची सूची केल्यास एकाधिक प्रतिमांसाठी मूल्ये सेट करणे शक्य आहे.
पार्श्वभूमी-क्लिप विशेषता
ही विशेषता सीमांखालील पार्श्वभूमीचे वर्तन परिभाषित करते (उदाहरणार्थ, ठिपके असलेल्या सीमांच्या बाबतीत):
- पॅडिंग बॉक्स- पार्श्वभूमी ब्लॉकमध्ये काटेकोरपणे प्रदर्शित केली जाते;
- सीमा बॉक्स- प्रतिमा फ्रेममध्ये बसते;
- सामग्री बॉक्स— पार्श्वभूमीतील चित्र केवळ सामग्रीमध्ये दिसते.
वापर उदाहरण:
body (पार्श्वभूमी-क्लिप: सामग्री-बॉक्स;).
Chrom आणि Safari ला -webkit- उपसर्ग आवश्यक आहे.
अपारदर्शकता आणि फिल्टर गुणधर्म
अस्पष्टता विशेषता तुम्हाला पार्श्वभूमीची पारदर्शकता सेट करण्याची परवानगी देते - CSS गुणधर्म सर्व ब्राउझरमध्ये कार्य करेल. मूल्य 0.0 ते 1.0 समावेशासह सेट केले जाऊ शकते. याद्वारे तुम्ही पारदर्शकता सेट करू शकता CSS पार्श्वभूमीपूर्णांक मूल्याशिवाय: 0.3 ऐवजी 3 लिहिणे पुरेसे आहे:
.ब्लॉक (पार्श्वभूमी-प्रतिमा: url(img.png); अपारदर्शकता: .3;).
पार्श्वभूमी पारदर्शकता सेट करण्यासाठी, ज्यातील CSS आवृत्ती 9 च्या खाली असलेल्या IE साठी देखील कार्य करेल, फिल्टर विशेषता वापरा:
.ब्लॉक (पार्श्वभूमी-प्रतिमा: url(img.png); फिल्टर: alpha(opacity=30);).
या प्रकरणात, अपारदर्शकता मूल्य 0 आणि 100 दरम्यान सेट केले आहे. लक्षात ठेवा की अपारदर्शकता विशेषता पारदर्शकता सेटिंगपेक्षा भिन्न आहे RGBA वापरूनआनुवंशिकता: जेव्हा वापरले जाते अस्पष्टता पारदर्शककेवळ पार्श्वभूमीच नाही तर ब्लॉकमधील सर्व घटक देखील.
सीआयएस आणि इतर सर्व देशांसाठी नेहमी ब्राउझर वापर आकडेवारीचे निरीक्षण करा. सर्वात एक मोठी समस्यासर्व लेआउट डिझायनर्सकडे IE च्या जुन्या आवृत्त्या आहेत, ज्या CSS3 चा पूर्ण वापर करण्यास परवानगी देत नाहीत. कोडिंग करताना, वापरण्यास विसरू नका विशेष सेवा, जे तुमचा ब्राउझर सपोर्ट करत आहे का ते तपासतात CSS मालमत्ता. आपण ब्राउझरच्या जुन्या आवृत्त्या स्थापित करू शकत नसल्यास, साइटचे ऑपरेशन तपासेल अशी सेवा शोधा भिन्न ब्राउझरऑनलाइन.
