پوشاندن یک عکس پس زمینه (Background Image)، با یک رنگ (Color) خاص، با تعریف یک تگ div جدید و مشخصه های background-color و opacity ، در CSS
برای پوشاندن (Overlay) یک عکس پس زمینه (Background Image)، با یک رنگ (Color) خاص، می توانیم یک تگ div جدید را درون تگی که عکس (Image) در پس زمینه (Background) آن نمایش داده شده، تعریف نموده و سپس با استفاده از مشخصه های background-color و opacity ، تعیین کنیم که یک رنگ (Color) خاص (با مقداری شفافیت) بر روی آن عکس (Image) نمایش داده شود.
به مثال زیر توجه کنید :
ابتدا عکس (Image) را به صورت معمولی (بدون رنگ) نمایش می دهیم.
کد مربوط به عنصری (Element) که عکس (Image) مورد نظر در پس زمینه (Background) آن نمایش داده می شود :
کد CSS :
کد کامل صفحه HTML :
نتیجه :
اکنون کدهای CSS را به گونه ای تغییر می دهیم که عکس (Image) با یک رنگ (Color) خاص با کد رنگ #00FF00 ، پوشانده (Overlay) شود.
کد مربوط به عنصری (Element) که عکس (Image) مورد نظر در پس زمینه (Background) آن نمایش داده می شود (دقت کنید که یک تگ div جدید را درون آن تعریف نموده ایم) :
کد CSS :
کد کامل صفحه HTML :
نتیجه :
