تصاویر در CSS

هنگام ایجاد طرح بندی وب سایت ، می توانید با استفاده از ویژگی های مختلف ، ظاهر و رفتار تصاویر در CSS دو بعدی را دستکاری کنید.

استفاده از تصاویر در CSS

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

body { 
  background-image: url(https://cdn.bitdegree.org/learn/pom-laptop.png?raw=true),
    url(https://cdn.bitdegree.org/learn/space%20gif.gif?raw=true);
}

تصاویر در CSS به دو نوع ارائه می شوند:

• تصاویر ساده با تعریف منبع (به عنوان مثال URL) اضافه شده است
• تصاویر ایجاد شده به صورت پویا با استفاده از خصوصیات CSS (به عنوان مثال شیب ها) ایجاد شده است

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

در جدول زیر ، می توانید محبوب ترین خصوصیاتی را که می توانید برای تغییر شکل تصاویر CSS خود استفاده کنید ، بررسی کنید:

توجه: با استفاده از ویژگی تغییر اندازه ، می توانید تعیین کنید که آیا کاربر می تواند اندازه تصویر را در CSS تغییر دهد یا خیر.

CSS تصویر sprites توضیح داده شده است

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

Sprites توسط صنعت بازی های ویدیویی ایجاد شده است ، زیرا زمان بارگیری سریع برای بازیکنان بسیار مهم است. ایده اصلی داشتن یک تصویر بزرگ و استفاده از قسمتهایی از آن در صورت لزوم است. در مثال زیر ، می توانید نحوه تعریف قسمت خاصی از روحانی را که می خواهید استفاده کنید ، مشاهده کنید:

#container {
 width: 64px;
 height: 64px;
 background: url('https://cdn.bitdegree.org/learn/css-image-sprite-3.png?9dd3e0b4') 10px 20px;
 background-repeat: none;
}

نکات مهم تصاویر CSS:

• در حالی که استفاده از sprites باعث صرفه جویی در وقت می شود ، به روزرسانی تصاویر CSS در صفحه وب شما را پیچیده تر می کند. سعی کنید از آنها در مواردی که نیاز به به روزرسانی مداوم گرافیکی دارید استفاده نکنید.
• فناوری های کمکی تصاویر را درک نمی کنند ، بنابراین اطمینان حاصل کنید که از تصاویر پس زمینه برای اطلاعات مهم استفاده نکنید و متون جایگزین برای تصاویر را در آن قرار دهید.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.