جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانآموزش Image Sprites در CSS

آموزش Image Sprites در CSS

11 مهر 1400
ارسال شده توسط همیار من
دوره های رایگان
202 بازدید
css

Image Sprites در CSS چیست؟

بطور کلی به مجموعه ای از چندین تصویر / عکس که درون یک تصویر واحد قرار میگیرند Image Sprites می گوییم ، یعنی در واقع اینجوری بگیم به چندین تصویر کوچک شده که در کنار همدیگر در یک تصویر واحد قرار دارند عکس اسپریت شده می گوییم.

خب حالا به چه درد میخوره این Image Sprites ؟! بیشترین فایده ای که میتونه برامون داشته باشه یکی افزایش سرعت بارگذاری صفحه وبمون هست و دیگری کم کردن تعداد درخواست ها به سمت سرور می باشد.

خب بلاخره من فقط یک عدد عکس دارم و چون داخل همون یک عدد عکس ، تعدادی عکس دیگر وجود دارد پس طبیعتا سرعت لود شدن صفحه وب من میتونه خیلی بیشتر باشه نسبت به صفحه ای که قرار است چندین عکس واحد درش لود شه.

خب حالا بریم تا یک نمونه از Image Sprites با همدیگه ببینیم، تصویر زیر نمونه ای از یک تصویر اسپریت شده می باشد ، پس یعنی الان ۱ عدد تصویر داریم ولی داخل همین ۱عدد تصویر ، تعدادی تصویر، بخش یا قسمت یا هرچی که شما اسمشو بزارید داریم.

پس در ادامه من میخوام با استفاده از CSS و یکسری ویژگی هایی که در این مورد ایجاد شده اند، به تصاویر موجود در این تصویر واحد دسترسی پیدا کنم و آنها را در صفحه وبم به نمایش درآورم.

آموزش کامل Image Sprites در CSS

خب همونطور که میبینید تصویر بالا درواقع تصویر اصلی و واحد من هس، خب شاید من دلم بخواد در گوشه ای از سایتم مثلا لوگوی فیسبوک قرمز رنگ ( f ) رو به نمایش درآورم یا مثلا در گوشه دیگه میخوام لوگوی توئیتر ( t ) رو به نمایش درآورم.

آموزش کامل Image Sprites در CSS

خب حالا من میخوام با استفاده از دستورات CSS از سمت چپ در ردیف ۴ لوگوی فیسبوک قرمز رنگ رو به نمایش در آورم، بریم ببینیم چجوری میتونیم اینکارو انجام بدیم. لطفا در ادامه و تا پایان این جلسه با من همراه باشید.

در دستورات زیر ویژگی به اسم background-position وجود دارد که با استفاده از این ویژگی موقعیت یا محل قرار گیری تصویر رو مشخص میکنیم، مقدار اول یعنی فاصله از سمت چپ به راست ( بصورت افقی ) تا محل تصویر و مقدار دوم یعنی فاصله از سمت بالا به پایین ( بصورت عمودی ) تا محل تصویر.

مثال شماره ۱ : استفاده در تگ DIV ( نمایش ۳ عدد از لوگوهای موجود در تصویر اصلی )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
 
div.t1{
width:46px;
height:50px;
background-image:url('demo-img-spr.png');
background-position: -47px -142px;
background-repeat:no-repeat;
}
 
div.t2{
width:46px;
height:46px;
background-image:url('demo-img-spr.png');
background-position:-190px 0;
background-repeat:no-repeat;
}
 
div.t3{
width:46px;
height:46px;
background-image:url('demo-img-spr.png');
background-position:-95px -95px;
background-repeat:no-repeat;
}
 
</style>

 

مثال های بیشتر از Image Sprites در CSS

مثال شماره ۱ : ایجاد یک منو ( Navigation Bar ) با استفاده از تکنیک Image Sprites در CSS

1
2
3
4
5
6
7
8
<body>
 
<ul id="navlist">
  <li id="m1"><a href="files/user.html"></a></li>
  <li id="m2"><a href="files/car.html"></a></li>
</ul>
 
</body>

 

مثال شماره ۲ : ایجاد یک لیست از آیتم ها با استفاده از تکنیک Image Sprites در CSS – روش دیگری برای قرار دادن عکس / تصویر بجای گلوله های مشکی آیتم های یک لیست وجود دارد که پیشنهاد میکنم از آن روش استفاده نمایید.

1
2
3
4
5
6
7
8
9
10
<body>
 
<ul id="mylist">
<li id="item1">Salam</li>
<li id="item1">Khobi?</li>
<li id="item1">Salam</li>
<li id="item1">Khobi?</li>
</ul>
 
</body>

بیشتر بخوانیم:

  • برترین افزونه های واترمارک وردپرس
  • آموزش کامل شبه عناصر در CSS همراه با مثال
  • بهترین افزونه های اسلایدر وردپرس
  • راهنمای کامل ترازبندی متن ها در CSS
  • تفاوت صفحات استاتیک و داینامیک در وب‌سایت
اشتراک گذاری:
برچسب ها: CSSImageImage Sprites در CSSآموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش CSS مقدماتیآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش css3 رایگان
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

در حال آپدیت... امروزه شاهد سایت های فروشگاهی بسیاری هستیم. افراد بسیاری وجود دارند که...

آموزش ایجاد لیست کشویی وابسته به هم در HTML

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت