All Articles Web
راه اندازی سوابق Tiled با استفاده از CSS
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

بعد ، خواهیم گرافیک به طرح ما از طریق 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!

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: