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

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط iranibonsai
      درود، سایتی رو با وردپرس بالا آوردیم
      اما اکنون در صفحات داخلی سایت کد خطایی رو در بخش بالای مرورگر نشون میده که نتونستیم رفعش کنیم
      Warning: count(): Parameter must be an array or an object that implements Countable in /home3/zahrefzo/public_html/wp-includes/post-template.php on line 284
      این خطا قبلا وجود نداشت، نفهمیدم به چه علتی بوجود آمده و تو اینترنت هم چیز خاصی راجعبه رفعش پیدا نکردم، ممنون میشم اعلام نظر بفرمایید
      آدرس سایت :
      http://minelbeautysalon.com//
    • توسط majid_one

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

      میخواستم بپرسم این ابزار ها با چه کدی نوشته شدن و آیا میشه همه جوره توشون دست برد و برای خودت سفارشیشون کرد و استایلشون رو شبیه استایل قالب وبسایت خودت کنی؟
    • توسط ashkan91
      با سلام و خسته نباشید
      دوستان کسی میدونه چطور میشه فیلد ایمیل رو از تو فرم تسویه حساب ووکامرس غیرضروری کرد؟ (بدون استفاده از افزونه) یکی از دوستان این لینک رو فرستادن اما نمیدونم کدام تکه کد از این صفحه را میبایست درون کدهای سایت قرار بدم که مشکل حل بشه؟
      https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/#example-make-phone-number-not-required
    • توسط amirmehdi950
      سلام روزتون بخیر
      من میخوام از افزونه ultimate member private message استفاده کنم اما یه چیزی کم داره.
      میخوام دکمه پیوست هم داشته باشه.
      (این افزونه همونطوری که از اسمش پیداست برای ارسال پیام خصوصی بین کاربرا ساخته شده، افزونه private message به تنهایی کار نمیکنه و باید ultimate member هم نصب باشه که افزونه بسیار خوبیه.)
      حالا من سوالی که دارم اینه که چطوری میشه این دکمه رو هم به قسمت چت اضافه کرد و از کجا باید کدهاشو ویرایش کرد
      این هم تصویر افزونه ( محل جایگذاریش میخوام کنار بخش emoji باشه)
       

      ممنونم
    • توسط mohamad7072
      سلام دوستان خسته نباشید 
      من میخوام ظاهر سایتم رو عوض کنم مثلا صفحه اول سایتم رو تغییر دادم اما این تغییرات اعمال نمیشه یا مثلا یه افزونه رو کامل پاک کردم ولی هنوز اثراتش هست 
      همه این مشکلات وقتی هست که به عنوان کاربر مهمان وارد سایت میشم ولی وقتی لاگین میکنم همه چی درست میشه...
      مشکل از چیه کسی میتونه کمکم کنه؟؟