رفتن به مطلب

خطای Combine images using CSS sprites


Configer

پست های پیشنهاد شده

سلام بچه ها وقتتون بخیر

توی سایت جی تی متریکس سایتم رو چک میکردم متوجه یه ارور شدم

ارور Combine images using CSS sprites

همونظور که میدونین معنیش اینه که سایت من ایکون هاش تو جایگاه های متفاوته وبرای هربار لودشون باید رکوئیست ارسال بشه به سرور

حالا من باید همه ایکون هامو تویه عکس جمع کنم

این کارو با استفاده از سایت

لینک ها تنها برای اعضای سایت قابل نمایش است.

انجام دادم. منتاحا یه سری کد های سی اسس وعکس داد بهم که نمیدونم باید توی کدوم قسمت جاگذاری کنیم

میشه کمک کنید که چجوری باید اینارو جایگذاری کنم؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

درود.

کار این سایت این هست که تمامی آیکن های کوچک آپلود شده رو در یک فایل و زیر هم قرار میده. بعد توسط CSS و دستور background-position میاد و برای هر بخش از سایت که به یک آیکن نیاز داره، اون آیکن رو از اون فایل ترکیبی پیدا میکنه و نمایش میده. مثال :

.but1, .but2
{ display: inline-block; background: url('png.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
 
.but1 { background-position: -0px -0px; width: 225px; height: 110px; }
.but2 { background-position: -0px -110px; width: 225px; height: 110px; }

شما اول باید اون عکسی که آیکن ها داخلش ترکیب شدن رو دانلود و داخل پوشه قالبتون ذخیره کنید.

بعد داخل کد CSS اون عکس رو به درستی فراخوانی کنید.

در قسمت CSS بعد از اون، که از background-position استفاده شده، از اون کلس ها باید در DIV که اون آیکن در قالب تعریف شده استفاده کنید تا بطور خودکار اون آیکن نمایش داده بشه.

کمی زمان بر هست تا تمامی آیکن ها به این صورت تصحیح بشن.

با اینکار شما بجای اینکه در هر بخش از قالب ، اون آیکن رو فراخوانی کنید، میایید و توسط دستورات CSS مکان اون آیکن در تصویر ترکیب شده رو به عنصر قالب میدید.

یعنی بجای استفاده از تگ img برای نمایش آیکن، کافیه تا بجای اون تصویر، از DIV استفاده کنید تا اون آیکن نمایش داده بشه. مثال :

<div class="but1"></div>

 

 

در ضمن می تونید از فونت های آیکن استفاده کنید. مثل fontAwesome که آیکن های متنوعی هم داره و روی سرعت سایت هم تاثیر خوبی میگذاره.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...