استایل دهی به متن جایگزین تصویر

همانطور که می دانید نوشته جایگزین یک تصویر در صفحات وب بوسیله خاصیت alt در تگ <img> به وجود می آید.

<img src="bird.jpg" alt="تصویر یک پرنده خیلی خشنگ" />

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

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

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

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

می دانستید که می توانید به این متن هم استایل بدهید؟ کافی است استایل مورد نظرتان را برای تگ تصویر بنویسید:

img {  
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  color: #e43;
  text-shadow: 2px 2px 5px #aaa;
}

مثال زیر را بررسی کنید:

See the Pen alt attr style by Mojtaba Seyedi (@seyedi) on CodePen.