sprite

این تاپیک 6 پاسخ و 2 مشارکت کننده دارد . آخرین آپدیت توسط :  آرمین نادری ،‏ 9 ماه و 3 هفته پیش .

این تاپیک تاکنون 278 بازدید داشته است .

نویسنده پست
چهار شنبه ، 17 فوریه 2016     4:03 ب.ظ #


mohammad karimi

Subscriber
144 پست100 تاپیک

دوستان سلام من تعدادی ایکون در سایتم دارم که تعداد در خواست به سرور های سایتم زیاد است کسی از دوستان به من بگه چگونه با Spriteمیتونم تعداد درخواست ها را کاهش بدم باتشکر/

0  تشکر
:: این تاپیک، پاسخ تائیدشده دارد : مشاهده پاسخ تائید شده توسط سوال کننده
چهار شنبه ، 17 فوریه 2016     10:11 ب.ظ #


آرمین نادری

ناظم
389 پست39 تاپیک

سلام دوست عزیز
در این تکنیک شما باید تمامی آیکون هایی که استفاده میکنید رو در یک فایل قرار بدید مثلا شما از پنج تا عکس کوچک در صفحه وبتون استفاده میکنید باید همه اون ها رو با استفاده از نرم افزاری مانند فوتوشاپ به صورت یک تصویر در بیارید مثل عکسی که برات پیوست کردم
بعد هم با استفاده از خاصیت background اون تصویر رو برای المان مورد نظر ست کنید در این مرحله میتونید با استفاده خاصیت background-position موقیت عکس رو تغیر بدید تا به نتیجه ای که میخواید برسید
موفق باشی

پیوست ها:
You must be logged in to view attached files.
0  تشکر
چهار شنبه ، 17 فوریه 2016     10:21 ب.ظ #


mohammad karimi

Subscriber
144 پست100 تاپیک

خب دوست عزيز ممنون تا اینجا افتاد حالا من میخوام مثلا p1را برای ایکون یکی از باکس های سایدربارم استفاده کنم میشه یک مثال کوچک با کدهای پcss
بزنید ممنون

0  تشکر
چهار شنبه ، 17 فوریه 2016     10:44 ب.ظ #


آرمین نادری

ناظم
389 پست39 تاپیک


.p1 {
background-image: url("your image url");
background-position: 0 0;
}

در مثال بالا برای المانی که کلاس p1 را دارد عکس رو ست میکنم بعد هم با خاصیت background-position موقعیت عکس رو تعین کردم البته باید به جای "your image url" آدرس عکست رو قرار بدی

2  تشکر
پنجشنبه ، 18 فوریه 2016     7:38 ق.ظ #


mohammad karimi

Subscriber
144 پست100 تاپیک

ممنون اقا نادری عزیز خب حالا من باید عکس هایی را ک در کنار هم میگذارم باید هر کدام یک اسم داشته باشند مانند این عکس شماhttp://s.7learn.com/uploads/2016/02/sprite.png

مثلا اسم عکس هایی ک در کنارهم قرار میگرند p1تا p10حالا من بخوام از یکی این عکس ها استفاده کنم به این شکل است درسته:
.sidebar{background-image:url("img/p1.jpg");background-position:0 0;}

0  تشکر
پنجشنبه ، 18 فوریه 2016     7:40 ق.ظ #


mohammad karimi

Subscriber
144 پست100 تاپیک

.sidebar{background-image:url("img/p1.jpg");background-position:0 0;}

0  تشکر
پنجشنبه ، 18 فوریه 2016     1:52 ب.ظ # پاسخ تائید شده توسط سوال کننده


آرمین نادری

ناظم
389 پست39 تاپیک

نه دوست عزیز شما باید با تغیر background-position حالت عکس رو تغیر بدی برات یه مثال کامل رو پیوست کردم امیدوارم به دردت بخوره

پیوست ها:
You must be logged in to view attached files.
0  تشکر
پست 1 تا 7 (از مجموع 7 پست)

این تاپیک پاسخ تائید شده دارد و بسته شده است .