X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

الوصول الحر بريميوم

وصول إلى مكتبة والمواد برمتها محور بريميوم ، ملفات المشاريع ، وأول 10 ٪ من كل فيديو تعليمي من دروس المكتبة على الانترنت .

إنشاء حسابك المجاني الآن!

انشاء الخلفيات تجانب طريق CSS
ترجم من قبل مترجم جوجل

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

المقبل ، وسوف نقوم بتحميل الرسم في التخطيط لدينا من خلال CSS. وسوف يتطلب ذلك قليلا من ناحية الترميز ، لكنها ليست صعبة للغاية شيء لسحب قبالة. أولا ، العثور على حكم المغلق الذي ترغب في تطبيق الرسم على الخلفية. وهذا يمكن أن يكون محدد الهوية التي تسيطر على والعنصر div ، قاعدة الطبقة ، أو أي قواعد أخرى قد تكون لديكم في الاستخدام. في بلدي على سبيل المثال ، انا ذاهب لتطبيق خلفية الرسم إلى إعادة تعريف العنصر الأساسي.

إضافة في خاصية "صورة الخلفية" ، متبوعا بنقطتين كاملة ، ثم "URL". ثم بين قوسين ، اكتب في المسار إلى الرسم ، تليها منقوطة. على سبيل المثال ، وهنا كيف يبدو رمز بلادي :

صورة الخلفية : عنوان (صور / Background.png) ؛

علما أن يقع لي الرسم ، "Background.png" داخل مجلد يسمى "الصور". تأكد من حفظ الملفات ومعاينة عملك في المتصفح. لاحظ كيف أن البلاط خلفية الرسم افتراضيا. يمكن أن نترك الأمور كما هي ، أو الاستمرار في تخصيص المزيد من الأشياء باستخدام خصائص إضافية CSS.

الخطوة 3

إذا كنت ترغب في السيطرة على السلوك وتبليط ، يمكنك إضافة في خاصية "تكرار الخلفية". يمكنك ثم تعيين القيمة إلى "تكرار" ، "كرر - X" ، "كرر ص" ، أو "عدم تكرار". كرر السينية وكرر ص قوة تبليط أفقيا أو رأسيا فقط ، في حين لم تتكرر ، لا يسمح للبلاط.

الخطوة 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!

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link