तपाईंको तस्विरहरू शैली र शैलीहरूमा छविहरू प्रयोग गर्नुहोस्
धेरै व्यक्तिले पाठ समायोजन गर्न, फन्ट बदल्ने, रङ, साइज र अन्यको लागि CSS प्रयोग गर्दछ। तर एउटा कुरा छ कि धेरै व्यक्तिहरू अक्सर बिर्सन्छन् कि तपाइँ तस्बिरहरू साथ पनि सीएसएस प्रयोग गर्न सक्नुहुनेछ।
तस्विर आफैलाई परिवर्तन गर्दै
सीएसएस तपाईंलाई कसरी समायोजन गर्न अनुमति दिन्छ पृष्ठमा छवि कसरी प्रदर्शित गर्दछ। तपाईंको पृष्ठहरू सँधै राख्नको लागि यो वास्तवमा उपयोगी हुन सक्छ। सबै तस्विरहरूमा शैलीहरू सेट गरेर, तपाइँ आफ्नो तस्बिरहरूको लागि एक मानक रूप सिर्जना गर्नुहोला। तपाईंले केहि गर्न सक्नुहुन्छ:
- तस्वीरहरू वरपर सिमाना वा रूपरेखा थप्नुहोस्
- लिङ्क गरिएका तस्बिरहरू वरिपरि रंगीन बोर्डर हटाउनुहोस्
- छविहरूको चौडाइ र / वा उचाई समायोजन
- ड्रप छाया थप्नुहोस्
- तस्विर घुमाउनुहोस्
- छवि माथि होभर हुँदा शैली परिवर्तन गर्नुहोस्
तपाईंको छविलाई किनारा दिँदै सुरू गर्न उत्कृष्ट स्थान हो। तर तपाईं केवल सीमा भन्दा बढी विचार गर्नुपर्छ - तपाईंको छविको सम्पूर्ण किनाराको बारेमा सोच्नुहोस् र मार्जिन र प्याडिंग समायोजन गर्नुहोस्। पतली कालो बोर्डको साथ एक तस्वीर राम्रो लाग््छ, तर सीमा र छवि बीच केहि प्याडिङ थप पनि राम्रो लाग्न सक्छ।
img {
किनारा: 1px ठोस कालो;
padding: 5px;
}
यो सम्भवतया राम्रो विचार हो कि कहिलेकाँही गैर सजावटी छविहरू सम्भव छ। तर जब तपाईले गर्नुहुन्छ भने, याद गर्नुहोस् कि अधिकांश ब्राउजर छविको वरिपरि एक रंगीन सीमाना जोड्दछ। यदि तपाईंले माथिल्लो कोड सिमाना परिवर्तन गर्न प्रयोग गर्नुभयो भने, लिङ्कले ओभरराइड गर्नेछ जबसम्म तपाइँले लिंकमा पनि सीमा हटाउनुहुन्छ वा परिवर्तन गर्नुहुन्न। यसलाई गर्नको लागी तपाइँ लिङ्क गरिएको छविहरू वरिपरि सीमा हटाउन वा परिवर्तन गर्न CSS बच्चा नियम प्रयोग गर्नुपर्दछ:
img> a {
किनारा: कुनै पनि होइन;
}
तपाईं सीएसएस को उपयोग गर्न को लागी या आफ्नो छवि को ऊँचाई र चौडाइ सेट गर्न को लागी पनि प्रयोग गर्न सक्नुहुन्छ। जबकि ब्राउजर को छवि आकार समायोजन गर्न को लागी एक महान विचार छैन किनकि डाउनलोड को गति को कारण, उनि छवि को आकार बदलन मा बेहतर हो रही छ ताकि उनि अझै पनि राम्रो लग रहे हो। र सीएसएसको साथ तपाईं आफ्नो छविहरू सबै मानक चौडाइ वा उचाइमा सेट गर्न सक्नुहुन्छ वा कन्टेनरको सम्बन्धमा आयामहरू सेट गर्नुहोस्।
सम्झनुहोस्, जब तपाई छविहरू पुनःआकार गर्नुहुन्छ, सर्वश्रेष्ठ परिणामहरूको लागि, तपाईले मात्र एक आयामको आकार परिवर्तन गर्नुपर्छ - उचाई वा चौडाइ। यो छविले यसको पहलू अनुपात राख्दछ, र यसैले अजीब लाग्दैन। अन्य मानलाई स्वत: सेट गर्नुहोस् वा ब्राउजलाई आगत अनुपातको अनुरूप राख्नको लागि यसलाई छोड्नुहोस्।
img {
चौडाई: 50%;
उचाई: ओटो;
}
CSS3 नयाँ गुण वस्तु-फिट र वस्तुस्थितिको साथ यस समस्याको समाधान समाधान प्रदान गर्दछ। यी गुणहरूको साथ तपाईं सटीक छवि उचाइ र चौडाइ परिभाषित गर्न सक्नुहुनेछ र कसरी पहल अनुपात संभाल्नु पर्छ। यसले तपाईंको छविको वरिपरि अक्षरबक्सिङ प्रभावहरू सिर्जना गर्न सक्छ वा छविलाई आकारमा फिट गर्न प्राप्त गर्न।
जबकि CSS3 वस्तु-फिट र ओब्जेक्ट-पोष्ट विशेषताहरू अझै व्यापक रूपमा समर्थित छैनन्, त्यहाँ त्यहाँ अन्य CSS3 विशेषताहरू छन् जुन सबै भन्दा आधुनिक ब्राउजरहरूमा राम्रोसँग समर्थित छन् जुन तपाइँ आफ्नो तस्बिरहरू परिमार्जन गर्न प्रयोग गर्न सक्नुहुन्छ। छायाँ छायाहरू, गोलाकार कोनेहरू, र रूपान्तरणहरू घुमाउन, स्किभ गर्न वा परिवर्तन गर्नका लागि चीजहरू अब सबै भन्दा आधुनिक ब्राउजरहरूमा सबै कामहरू सार्नुहोस्। त्यसपछि तपाईले छविहरू परिवर्तन गर्न, जब क्लिक गरिएको छ, वा क्लिक गरेको बेलामा वा समय अवधि पछि परिवर्तन गर्न CSS संक्रमणहरू प्रयोग गर्न सक्नुहुन्छ।
पृष्ठभूमिका रूपमा छविहरू प्रयोग गर्दै
सीएसएसले तपाईँका तस्बिरहरूसँग फैंसी पृष्ठभूमिहरू सिर्जना गर्न सजिलो बनाउँछ।
तपाईले पृष्ठभूमि पृष्ठलाई सम्पूर्ण पृष्ठमा वा केवल एक विशिष्ट तत्वमा थप्न सक्नुहुन्छ। पृष्ठभूमिमा छवि गुणको साथ पृष्ठमा पृष्ठभूमि छवि सिर्जना गर्न सजिलो छ:
जीउ {
पृष्ठभूमि छवि: url (background.jpg);
}
शरीर चयनकर्तालाई पृष्ठमा निर्दिष्ट तत्वमा परिवर्तन गर्नुहोस् केवल एक तत्वमा पृष्ठभूमि राख्न।
तस्बिरहरूको साथ अर्को मजेदार चीज तपाईं एक पृष्ठभूमि छवि सिर्जना गर्दै हुनुहुन्छ जुन बाँकी पृष्ठको साथ स्क्रॉल गर्दैन - जस्तै वाटरमार्क। तपाईले केवल शैली पृष्ठभूमि-अनुलग्नक प्रयोग गर्नुहुन्छ: निश्चित; तपाईंको पृष्ठभूमि छवि सहित। तपाईंको पृष्ठभूमिका लागि अन्य विकल्पहरूले ती पृष्ठभूमिलाई दोहोर्याउने सम्पत्ति प्रयोग गरेर तेर्सो रूपमा ठाडो रूपमा वा ठाडो रूपमा समावेश गर्दछ।
पृष्ठभूमि-दोहोर्याउनुहोस्: दोहोर्याउनुहोस्-एक्स; छवि तेर्सो रूपमा र पृष्ठभूमि-दोहोरो टाइल गर्न: दोहोर्याउनुहोस् - y; ठाडो रूपमा टाइल गर्नुहोस्। र तपाईले आफ्नो पृष्ठभूमि छविलाई पृष्ठभूमि-स्थिति गुणस्तरको साथ राख्न सक्नुहुन्छ।
र CSS3 ले तपाईंको पृष्ठभूमिको लागि थप शैलीहरू पनि थप्छ। तपाइँ आफ्नो छविहरू कुनै साइज पृष्ठभूमि फिट गर्न वा सञ्झ्यालको साइजमा मापन गर्न पृष्ठभूमि छवि सेट गर्न सक्नुहुन्छ। तपाईं स्थिति परिवर्तन गर्न सक्नुहुन्छ र त्यसपछि पृष्ठभूमि छवि क्लिप गर्न सक्नुहुन्छ। तर CSS3 को बारे मा सबै भन्दा राम्रो चीजहरु मध्ये एक छ कि तपाईं अझै पनि अधिक जटिल प्रभावहरु बनाउन को लागि एकाधिक पृष्ठभूमि छवियों ले सकते हो।
HTML5 ले स्टाइल छविहरू मद्दत गर्दछ
एचटीएमएल 5 मा दृश्यात्मक तत्व कुनै पनि छवि वरपर राखिएको हुनुपर्छ जुन कागजात भित्र एक्लै खडा हुन सक्छ। यसको बारेमा सोच्ने एक तरिका हो भने छवि एक परिशिष्टमा देखा पर्न सक्छ, त्यसपछि यो छवि तत्व भित्र हुनुपर्छ। त्यसपछि तपाइँ त्यस तत्व र FIGCAPTION तत्वलाई तपाइँको तस्विरमा शैली थप्न प्रयोग गर्न सक्नुहुन्छ।