5 <आईएमजी> सीएसएस गुण आपको पता होना चाहिए

सीएसएस गुण हैं, जैसे कि पृष्ठभूमि चित्र, सीमा चित्र, मास्किंग और क्लिपिंग गुण, जिसके साथ आप कर सकते हैं सीधे चित्र जोड़ें वेब पेजों पर जाएं और उनके व्यवहार को नियंत्रित करें। हालांकि, वहाँ भी कम अक्सर उल्लेख छवि से संबंधित सीएसएस गुण हैं कि के साथ जोड़ा छवियों पर काम करते हैं HTML टैग, जो वेब पेजों में चित्र जोड़ने का पसंदीदा तरीका है.

इन बाद वाले गुणों का नौकरी विवरण अलग-अलग है छवि छाया को नियंत्रित करना सेवा मेरे पैनापन, बेहतर उपस्थिति और छवियों की स्थिति को नियंत्रित करने में हमारी मदद करता है टैग। आइए एक-एक करके उन्हें देखते हैं.

1. छवियों को तेज करें छवि प्रतिपादन

जब कोई छवि अपग्रेड की जाती है, तो ब्राउज़र छवि को सुचारू करता है, तो यह पिक्सेलयुक्त नहीं दिखता है। लेकिन, छवि और स्क्रीन के संकल्प के आधार पर, यह हर समय सबसे अच्छा नहीं हो सकता है। आप इस ब्राउज़र व्यवहार को नियंत्रित कर सकते हैं छवि प्रतिपादन संपत्ति.

यह अच्छी तरह से समर्थित संपत्ति है इमेज को स्केल करने के लिए उपयोग किए जाने वाले एल्गोरिदम को नियंत्रित करता है. इसके दो मुख्य मूल्य हैं कुरकुरा-किनारों तथा pixelated.

कुरकुरा-किनारों मूल्य पिक्सेल के बीच रंग विपरीत को बनाए रखता है. दूसरे शब्दों में, छवियों को कोई चौरसाई नहीं किया जाता है, जो पिक्सेल कलाकृति के लिए महान.

कब pixelated उपयोग किया जाता है, एक पिक्सेल के आस-पास के पिक्सेल उसका रूप धारण करो, ऐसा लगता है जैसे वे एक साथ हैं एक बड़ा पिक्सेल बनाएँ, उच्च-रिज़ॉल्यूशन स्क्रीन के लिए बढ़िया है.

यदि आप नीचे GIF में फूलों के किनारों को करीब से देख रहे हैं, तो आप नियमित और ए के बीच अंतर देख सकते हैं pixelated छवि.

 img छवि-प्रतिपादन: पिक्सेलयुक्त;  

2. साथ में स्ट्रेच चित्र वस्तु फिट

शामिल, आवरण, भरना मान सभी परिचित हैं, हम उनका उपयोग करते हैं पृष्ठभूमि आकार वह संपत्ति जो एक पृष्ठभूमि छवि को नियंत्रित करती है कि वह किस तत्व से संबंधित है। वस्तु फिट संपत्ति इसके काफी समान है, क्योंकि यह भी निर्धारित करती है कैसे एक छवि अपने कंटेनर के अंदर आकार.

शामिल मूल्य इसके कंटेनर के भीतर छवि शामिल है. आवरण वही करता है, लेकिन अगर छवि और कंटेनर का पहलू अनुपात मेल नहीं खाता है, तो छवि को क्लिप किया गया है. भरना करने के लिए छवि का कारण बनता है खिंचाव और इसके कंटेनर भरें. घटाना छवि का सबसे छोटा संस्करण चुनता है प्रदर्शित करने के लिए.

 
  # कंटेनर चौड़ाई: 300 पीएक्स; ऊंचाई: 300 पीएक्स;  img चौड़ाई: 100%; ऊंचाई: 100%; ऑब्जेक्ट-फिट: समाहित;  

3. शिफ्ट छवियों के साथ वस्तु-स्थिति

इसी प्रकार पूरक करने के लिए पृष्ठभूमि स्थिति की संपत्ति पृष्ठभूमि आकार, वहाँ एक है वस्तु-स्थिति के लिए संपत्ति वस्तु फिट, बहुत.

वस्तु फिट संपत्ति एक छवि ले जाता है एक छवि कंटेनर के अंदर दिए गए निर्देशांक के लिए. निर्देशांक के रूप में परिभाषित किया जा सकता है पूर्ण लंबाई इकाइयाँ, सापेक्ष लंबाई इकाइयाँ, कीवर्ड (चोटी, बाएं, केंद्र, तल, तथा सही), या ए उनमें से वैध संयोजन (शीर्ष 20px सही 5px, केंद्र सही 80px).

 
  # कंटेनर चौड़ाई: 300 पीएक्स; ऊंचाई: 300 पीएक्स;  img चौड़ाई: 100%; ऊंचाई: 100%; ऑब्जेक्ट-पोज़िशन: 150px 0;  

4. छवियों के साथ बैठो ऊर्ध्वाधर- align

हम कभी-कभी जोड़ते हैं (जो स्वभाव से इनलाइन हैं) टेक्स्ट स्ट्रिंग्स के बगल में अतिरिक्त जानकारी या सजावट के लिए. उस स्तिथि में, पाठ और छवि संरेखित करना वांछित स्थिति में एक मुश्किल सा मुश्किल हो सकता है-अगर आप नहीं जानते कि किस संपत्ति का उपयोग करना है.

ऊर्ध्वाधर- align संपत्ति है अकेले तालिका कोशिकाओं के लिए विशेष नहीं. यह इनलाइन बॉक्स के अंदर एक इनलाइन तत्व को भी संरेखित कर सकता है, और इस प्रकार इसका उपयोग किया जा सकता है टेक्स्ट की एक पंक्ति में एक छवि संरेखित करें. यह उचित मान लेता है जो इनलाइन तत्व पर लागू किया जा सकता है, इसलिए आपके पास चुनने के लिए कई विकल्प हैं.

 
 पीडीएफ  
 

5. छाया चित्र फ़िल्टर: ड्रॉप-शैडो ()

जब पाठ और बक्से में असंगत रूप से उपयोग किया जाता है, तो छाया एक वेब पेज पर जीवन जोड़ सकते हैं। छवियों में भी यही सच है. कोर आकृतियों और पारदर्शी पृष्ठभूमि वाली छवियां से लाभ उठा सकते हैं परछाई डालना सीएसएस फिल्टर.

इसके तर्क हैं छाया-संबंधी सीएसएस गुणों के मूल्यों के समान (पाठ की छाया, डब्बे की छाया)। पहले दो प्रतिनिधित्व करते हैं ऊर्ध्वाधर और क्षैतिज दूरी छाया और छवि के बीच, तीसरा और चौथा है कलंक और यह छाया का प्रसार त्रिज्या, और अंतिम एक है छाया का रंग.

बिलकुल इसके जैसा पाठ की छाया, परछाई डालना एक छाया भी बनाता है संबंधित वस्तु पर ढाला हुआ. इसलिए, जब यह एक छवि पर लागू होता है, तो छाया छवि के दृश्य भाग का आकार लेती है.

 img फ़िल्टर: ड्रॉप-छाया (0 0 5px नीला);  

यह भी पढ़ें: CSS3 छवि प्रतिबिंब [CSS3 युक्तियाँ]