list-style-image

با استفاده از ویژگی list-style-image می توان برای نشانه گر آیتم های یک لیست تصویر قرار داد.

این ویژگی همچنین می تواند بر روی عناصری که display آنها از نوع list-item است کنترل داشته باشد.

زمانی که تصویر در دسترس باشد مقداری که توسط ویژگی list-style-type در نظر گرفته شده است نادیده گرفته می شود.

 

مقادیر ویژگی list-style-image

 


list-style-image: <url> | none | inherit

 

 

none

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

 

url

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

 


ul { 
  list-style-image: url('images/img.png'); 
}

 

 

inherit

مقداری که برای لیست پدر تعیین شده است به عنصر نیز ارث می رسد.

 

مثال

دموی زیر را بررسی کنید:

 

See the Pen list-style-image by Mojtaba Seyedi (@seyedi) on CodePen.


 

مطالب مرتبط

3 دیدگاه برای “list-style-image”

  1. سلام و خسته نباشید ممنون از آموزشات مفیدتون یه سوال دارم اونم اینه که چطوری میتونم اندازه تصویر رو مشخص کنم چون من وقتی انتخاب میکنم یه تصویر رو برای عکس لیست خیلی بزرگتر از این میشه منظورم اینه اینجا چطور میتونم width , height رو مشخص کنم ؟

    پاسخ

    1. سلام، ممنونم

      از طریق سی اس اس این امکان وجود نداره که روی اندازه list-style-image کنترل داشته باشید، اندازه واقعی تصویرتون اینجا ظاهر میشه. چندتا راه حل دارید:

      1. می تونید عرض و ارتفاع اصلی عکستون رو تغییر بدید (برش بدید یا کوچیک کنید عکس رو)

      2. می تونید اون عکس رو بدید پس زمینه li و بعد به li یک padding بدید تا نوشته از روی تصویر بیاد کنار، اندازه پس زمینه هم که میشه از توی سی اس اس کنترل کرد.

      3. می تونید از شبه عنصر before استفاده کنید بصورت زیر:

      
li {
  list-style: none;
}

li::before {
  content: '';
  display: inline-block;
  height: 100px; /* اندازه دلخواه */ 
  width: 100px; /* اندازه دلخواه */ 
  background-image: url();
}
      پاسخ

  2. سلام وقتتون بخیر
    list-style-image اولویتش از از بقیه پراپرتی های list-style بالاست ؟
    چون من بعد از list-style-image اومدم پراپرتی list-style-type:none زدم ولی اعمال نشد ینی اون image رو مخفی نکرد ! البته کلیت رو میدونما اگه بخوام image نباشه اصولا باید ننویسیم ولی خواستم ببینم در کل اهمیتش نسبت به بقیه بالاست ؟

    پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *