یک سوال درمورد طراحی قالب

[Akbar 441]

در بعضی از سایت ها مثلا تصاویری که برای پس زمینه قسمت عنوان مطالب و قسمت سایدبار و آیکون های منو استفاده میکنند یک تکه هست!

وقتی این آیکون ها یک تکه باشه چطور میشه در جاهای مختلف بصورت درست استفاده کرد؟

این تصویر رو نگاه کنید(مربوط به سایت wordpress98 هست)

[Morteza 34190]

به این تکنیک css image sprites میگن. ببینید:

http://www.w3schools.com/css/css_image_sprites.asp

[Parsa 23463]

با خاصیت background-position یا همون background

نمونه:

کد زیر از 14 پیکسل پایینتر و 14 پیکسل به سمت راست تصویر رو نشون میده

background-position: 14px 14px;

یا:

عدد اول فاصله از چپ

عدد دوم فاصله از بالا

background: #00ff00 url('smiley.gif') no-repeat fixed 100px 100px;

به نوعی شما باید مکان نمایش را به قسمت مربوطه تغییر دهید

با تنظیم کردن پهنا و ارتفاع خروجی مورد نظر حاصل میشود

http://www.w3schools.com/cssref/pr_background-position.asp

http://www.w3schools.com/cssref/css3_pr_background.asp

[Akbar 441]

واقعا ممنون.

و اینکه این ترفند خوب هست یا اینکه همون تکه تکه بودن تصاویر بهتره؟

[Mr.Mohammad 3]

100 درصد این ترفند چون یک عکس لود میشه

در سرعت لودینگ خیلی تاثیر داره

[Parsa 23463]

مزیت این کار اینه که تعداد درخواست به سمت سرور کمتر میشه و در نتیجه سرعت بالاتر میره