All Articles Web
टाइल सीएसएस का उपयोग पृष्ठभूमि की स्थापना
Geoff Blake on Wed, April 27th | 0 comments
Setting up tiled backgrounds via CSS is a great way to add visual appeal to your website and to layout components that make up your overall design. The good news is, it's super easy, and there are som

Setting up tiled backgrounds via CSS is a great way to add visual appeal to your website and to layout components that make up your overall design. The good news is, it's super easy, and there are some additional properties that we can make use of to further control our backgrounds. Let's check it out!

चरण 1

पहले पहली बात - हम टाइल करने के लिए एक ग्राफिक की जरूरत है! शायद सबसे अच्छा यह करने के लिए जगह में है फ़ोटोशॉप . तुम एक नरम ग्राफ़िक का उपयोग कर सकते हैं, इतना है कि यह एक वॉटरमार्क, लोगो, या वास्तव में कुछ भी आप चाहें के रूप में दिखाई देंगे. सुनिश्चित करें कि ग्राफ़िक बहुत बड़ा नहीं है, और यह एक PNG, JPEG या GIF के रूप में सहेजें. अब हम यह हमारे लेआउट में इस्तेमाल के लिए तैयार कर रहे हैं.

चरण 2

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

"पृष्ठभूमि छवि संपत्ति, एक पूर्ण बृहदान्त्र द्वारा पीछा किया, तो" url "में जोड़ें. कोष्ठक में फिर, अपनी ग्राफिक रास्ते में प्रकार, एक अर्द्ध बृहदान्त्र के द्वारा पीछा किया. उदाहरण के लिए, यहाँ है कैसे मेरे कोड दिखता है:

पृष्ठभूमि छवि: url (छवियाँ Background.png /);

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

चरण 3

यदि आप खपरैल का छत व्यवहार को नियंत्रित करने के लिए चाहते हैं, तो आप "पृष्ठभूमि दोहराने" संपत्ति में जोड़ सकते हैं. फिर आप सेट कर सकते हैं मूल्य करने के लिए "दोहराने के लिए," दोहराने-x, "y-दोहराने," या "नहीं दोहराने." दोहराएँ x और दोहराने-y के खपरैल का छत केवल क्षैतिज या खड़ी, जबकि कोई दोहराने खपरैल का छत की अनुमति नहीं है बल.

चरण 4

Another option that we have available is the ability to control the horizontal and vertical positioning of a non-tiling background image. Try adding in the "background-position" property, followed by two pixel values. The first pixel value is the graphic's horizontal position, and the second, its vertical position.


As you can see, CSS makes it super-easy to control background images. The fun part is coming up with cool graphics and seeing what's possible. Try experimenting with different tiled images, gradients, and patterns. Have fun!

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: