electro-bargh

توضیح درباره این Combine images using CSS sprites

13 پست در این موضوع قرار دارد

با سلام

خوب هستین .. الحمدوالله .... ولی من خوب نیستم ... :rolleyes: به خاطر این :

ادرس وبسایتم : http://www.electro-bargh.ir/

دوستان برای سئوی وبسایتم خیلی زحمت کشیدم تا اینجا رسیدم .. خوب بریم سر اصل مطلب برین به لینک زیر رجوع کنید

http://gtmetrix.com/reports/www.electro-bargh.ir/6pNoCs9m

خوب قسمت Combine images using CSS sprites خیلی از وبسایت ها رو گشتم ولی مطالب یا ناقص بود یا اصل من هنگ کردم :o

خوب این ارور ها رو داده

The following images served from electro-bargh.ir should be combined into as few images as possible using CSS sprites.

حالا هر کاری می کنم نمیتونم چجوری این ارور ها رو درست کنم ..... این مطلب انگلیسی بالا میگه باید تمام عکس ها بشن یکی .... چجوری ...

خوهشا توضیح کامل باشه .

دوستان راهنمایی کنید............

راستی اگه این یه مورد رو اوکی کنم که میترکونه .... :D البته با کمک شما میترکونیـــــــــــــــــــــم :P

با تشکر ..منتظر نظراتتون هستم.

0

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


لینک به پست

شما باید تصاویری که در بکگراند لینکها ، لیستها، کلیدها و ... استفاده کردید را در یک فایل قرار دهید و با پوزیشن و طول و عرض مکان مورد نظر را در تصویر نشان دهید

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

http://www.spritecow.com/

http://css-sprit.es/

8

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


لینک به پست

ممنونم فکر کنم ... دارم درستش می کنم

0

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


لینک به پست

شما باید تصاویری که در بکگراند لینکها ، لیستها، کلیدها و ... استفاده کردید را در یک فایل قرار دهید و با پوزیشن و طول و عرض مکان مورد نظر را در تصویر نشان دهید

http://www.w3schools...age_sprites.asp

http://www.spritecow.com/

http://css-sprit.es/

ممنون

من متوجه نشدم یعنی اون کدی رو که بهمون می ده یک فایل css درست کنیم براش همون جا قرار بدیم؟ یا تمام عکسها رو که کد کریدم تو یک فایل cssجمع کنیم؟

بعد خود عکس رو چیکار کنیم پاک کنیم؟

0

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


لینک به پست

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

توضیح این ترفند در بخش html-css هست

1

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


لینک به پست

ممنون من یک سرچی زدم

اومدم همه عکسام رو تو یک فایل جمع اوری کردم و همه عکسها رو پاک کردم

الان خوب شده

ولی باید عکس ها پاک می کردم؟

0

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


لینک به پست

بله دیگه، استفاده‌ای ندارند!

2

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


لینک به پست

رفتم تمام کارایی که گفته شده رو انجام دادم ، حالا دارم عکس ها رو پاک میکنم و عکس جدید رو آپلود میکنم

از یه طرف Combine images using CSS sprites داره رتبش خوب میشه ، از یه طرف Avoid bad requests داره رتبش بد میشه

همون عکس ها رو داره درخواست میده

توی یه فایل عکس ها رو قرار دادم ، اینجوری که من برداشت کردم باید تکه کد فراخونیش رو اینجوری بنویسم :


.parent-element {background:url(result.png);background-position: 0px 0px;background-position: 0px -16px;background-position: 0px -34px;background-position: 0px -75px;background-position: 0px -121px;background-position: 0px -151px;background-position: 0px -181px;background-position: 0px -200px;background-position: 0px -220px;background-position: 0px -250px;}

و بذارم توی style قالبم ، درسته ؟

عکسه رو هم توی قسمت images آپلودش کردما ، اما بازم نمیدونم مشکل چیه !

1

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


لینک به پست

نه شما اشتباه کردین این position ها رو شما میبایست توی هر کدوم از استایل هایی که تصویر لود میکردن استفاده کنید.

مثلا شما عکس چشم رو برای تعداد بازدید با تمامی عکس ها یکی کردین.

حالا میخواین توی کد ها ازش استفاده کنید.

اول از همه شما میاین توی استایل بازدید ها و

background:url(images/view.png);

و کد که داره تصویر view.png رو فراخوانی میکنه رو باید به result.png تغییر بدین و به جز اون باید ببینید که عکس چشم توی عکسی که ساختین چه اندازه ای داره.مثلا:

در اندازه:


background-position: 0px -16px;

قرار داره.حالا اینطوری تصویر به راحتی لود میشه و نیازی به تصویر های قبلی نیست.در اصل کد استایل view این شکلی میشه:


background:url(images/view.png);
background-position: 0px -16px;

البته برای تمامی تصویر ها همین کار باید انجام بشه.

در ضمن اون تصویری که ساخته میشه رو باید در پوشه images قالب بزارین.

2

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


لینک به پست

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

1

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


لینک به پست

بازدید ها مثال بود.

دقیق بخونید.

شما برید ببینید که تصاویرتون توی استایل کجا فراخوانی میشن.

بعد کار های بالا رو براش لنجلم بدین.

1

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


لینک به پست

شما برید ببینید که تصاویرتون توی استایل کجا فراخوانی میشن.

بعد کار های بالا رو براش انجام بدین.

از کجا میتونم بفهمم که تصاویر از کجا فراخوانی میشن ؟

1

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


لینک به پست

ارسال شده در (ویرایش شده)

ابتدا فایل .css این کد رو اضافه کنید


.Sp-ImageAll-2{background:url(images/ImageAll-2.png) no-repeat;}
.Sp-ImageAll-2.home{background-position:-83px -2px; width:23px; height:23px;}

کد بالا برای مثال هستش

نام ImageAll-2.png باید به عکسی که درست کردید تغییر کنه

آدرس فولدر عکساتون باید نام فولدر عکسهای خودتون باشه images

نام Sp-ImageAll-2.home رو در کلاس تگ div یا a قرار بدید تا عکس برای شما نمایش داده بشه

باید عرض کنم که background-position:-83px -2px;

پوزیشن آیکونی که میخواین نمایش بدید برای اینکه بفهمید پوزیشن عکستون چیه از طریق فتوشاپ این کار رو انجام بدید

در فتوشاپ منوی windows تیک info را بزنید تا ابزاری که پوزیشن عکس ها رو نمایش میده ظاهر میشه

بعد خودتون دستی تک تک برای هر عکس یک


.Sp-ImageAll-2.home{background-position:-83px -2px; width:23px; height:23px;}

تعریف کنید با این تفاوت که باید home رو تغییر نام بدید

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

از کجا میتونم بفهمم که تصاویر از کجا فراخوانی میشن ؟

خودتون باید تعریف کنید به این صورت


.Sp-ImageAll-2{background:url(images/ImageAll-2.png) no-repeat;}

ویرایش شده در توسط M.At
0

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


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط رضا مهدیار
      سلام دوستان
      گروه ما برای بخش سایت و مدیریت رسانه های اجتماعی با یک فرد با انگیزه تمایل همکاری داره، رسانه ما در زمینه فینتک و اقتصاد هستش ممنون میشم از دوستان اگر  خودتون تمایل دارید یا کسی رو میشناسید معرفی کنید ممنونم
    • توسط marketdl.com@gmail.com
      با سلام. وقت همگی بخیر
      بنده یه قالب فروشگاهی رو طراحی کردم. الان بخش سبد خرید ، عضویت و لاگین و کدتخفیف مشکل داره
      بخش سبد خرید : وقتی کاربر لاگین باشه سبد خرید به درستی کار میکنه، اما وقتی لاگین نباشه نمیتونه 2 تا محصول به سبد اضافه کنه. آدرس سایت هم androidsrc.ir هستش. خودتون تست کنید.
      بخش عضویت و لاگین : بخش عضویت درسته و اطلاعات کاربر پس از عضویت داخل دیتابیس ذخیره میشه، اما توی بخش کاربران وردپرس نمیاد. لاگین هم اصلا کار نمیکنه
      بخش کدتخفیف هم اصلا کار نمیکنه
       
      درضمن سایت بنده قبلا قالبش یه چیز دیگه بود و وردپرس نسخه پایین روش نصب بود، به خاطر اینکه نمی شد وردپرس رو آپدیت کنم، مجبور شدن قالب جدید طراحی کنم تا با وردپرس و ووکامرس جدید همخونی داشته باشه. یه سری اطلاعات از قبل مصل محصول و پست و کاربر وجود داشته. و الان این مشکلات به وجود اومده
      هر کسی میتونه مشکل رفع کنه بنده هزینش رو پرداخت میکنم
    • توسط masoudmosleh267
      سلام دوستان. من یه سایتی رو از بکاپ گرفتم و از یه هاست و دامنه به یه هاست و دامنه جدید انتقال دادم. حالا چه سایت رو که باز میکنم چه وارد پیشخوان وردپرس میشم یه ارور میاد یکی از خطلی functions.php قالب رو نشون میده.
      Parse error: syntax error, unexpected 'class' (T_CLASS), expecting identifier (T_STRING) or variable (T_VARIABLE) or '{' or '$' in /public_html/wp-content/themes/khadamator/functions.php on line 1132
      مشکل چیه؟
    • توسط amirsa
      سلام
      من محصولات متغیر رو در ووکامرس که وارد میکنم،(محصول ممکنه 2 یا 3 صفت داره که باید انتخاب بشه)
       توی فروشگاه ووکامرس بصورت حد اقل و حداکثر قیمت ها نشون داده میشه
      مثلا کالا دونوع 10 و  20 تومانی هست.صفت آ 15 تومن برای مشتری هایی که بخوان.تو فروشگاه قیمت رو بصورت 10-35 نشون میده که بیشتر از قیمت اصلی است.من میخوام همون 10 و 20 رو نشون بده
      این مشکل انرژی زیادی ازم گرفته ممنون میشم راهنماییم کنید 
    • توسط arianemun
      سلام عرض ادب به کاربران وردپرس پارسی ، من یک مشکلی دارم در افزونه ای ، افزونه woocomerce product finder یک افزونه ای است طبق تنظیمات و چیز هایی که برای محصول ووکامرسی تعریف میکنیم با انتخواب گزینه ها توسط کاربر محصول مورد نظر خودش رو پیدا میکنه، تنها مشکلی که این افزونه یا میشه گفت ضعفی که داره تفاوت محصول برجسته رو با محصول ساده متوجه نمیشه یعنی اگر تو اون دسته یک محصول برجسته باشه و یک محصول ساده اون ها رو از هم تفکیک نمیکنه من میخواستم این قابلیت رو به این افزونه اضافه کنم که کاربر وقتی محصولش رو پیدا کرد هم محصول ساده ها رو ببینه و محصول برجسته شده ! ممنون میشم کمک کنید .
       
      لینک افزونه استفاده شده