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

دسترسی به حق بیمه رایگان

دسترسی به کتابخانه تمام ما از مقالات توپی حق بیمه ، فایل های پروژه و اولین 10 ٪ از هر یک از مقالات ویدئو از کتابخانه خودآموز آنلاین.

ایجاد حساب کاربری رایگان شما در حال حاضر!

راه اندازی سوابق Tiled با استفاده از 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 بار. این خواهیم یک کمی از برنامه نویسی دست نیاز داشته باشد ، اما از آن است که هر چیزی بیش از حد روی حیله و تزویر به جلو و خاموش نیست. اول ، پیدا کردن حکومت CSS که شما می خواهم به اعمال گرافیکی را به پس زمینه. و این ممکن است که کنترل یک عنصر DIV ، یک قانون کلاس ، و یا هر قواعد دیگر شما ممکن است در استفاده از انتخابگر ID. در این مثال من ، من قصد دارم برای درخواست یک پس زمینه های گرافیکی به یک عنصر body دوباره تعریف.

اضافه کردن در "تصویر پس زمینه" اموال ، و پس از کامل روده بزرگ ، پس از آن "URL". سپس در داخل پرانتز ، نوع در مسیر به گرافیک خود را ، پس از نیمه روده بزرگ. به عنوان مثال ، در اینجا چگونگی کد من به نظر می رسد :

تصویر پس زمینه : آدرس URL (تصاویر / Background.png) ؛

توجه داشته باشید که گرافیک من ، "Background.png" در داخل پوشه ای به نام "عکس ها قرار دارد." مطمئن باشید که برای ذخیره فایل های خود و کار خود را در مرورگر خود. توجه کنید که چگونه کاشی پس زمینه های گرافیکی به طور پیش فرض است. ما می توانیم چیزهایی که آنها را ترک کند ، و یا همچنان برای سفارشی کردن چیزهای بیشتر با استفاده از خواص CSS اضافی.

مرحله 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!

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