تیره تر شدن یک عکس پس زمینه (Background Image)، در هنگام بردن موس بر روی آن عکس پس زمینه (Background Image)، با تعریف یک تگ div جدید و مشخصه های background-color و opacity ، در CSS

همان طور که می دانید، با استفاده از مشخصه background:url در CSS ، می توانیم یک عکس (Image) را به صورت پس زمینه (Background) قرار دهیم.

حال فرض کنید که بخواهیم تعیین نماییم که هنگام بردن موس بر روی آن عکس پس زمینه (Background Image)، عکس مورد نظر تیره تر شود.

برای این منظور، ابتدا یک تگ div جدید را درون تگی که عکس (Image) در پس زمینه (Background) آن نمایش داده شده، تعریف نموده و سپس با استفاده از مشخصه های background-color و opacity ، تعیین می کنیم که یک رنگ (Color) تیره (رنگ سیاه با 50 درصد شفافیت) بر روی آن عکس (Image) نمایش داده شود.

به مثال زیر توجه کنید :

مثال

ابتدا عکس پس زمینه (Background Image) را به صورت عادی تعریف می کنیم.

کد مربوط به عنصری (Element) که عکس (Image) مورد نظر در پس زمینه (Background) آن نمایش داده می شود :

کد CSS :

کل کدهای صفحه HTML :

نتیجه :

اکنون کدها را به گونه ای تغییر می دهیم که با بردن موس بر روی آن عکس پس زمینه (Background Image)، عکس مورد نظر تیره تر شود.

کد مربوط به عنصری (Element) که عکس (Image) مورد نظر در پس زمینه (Background) آن نمایش داده می شود (دقت کنید که یک تگ div جدید را درون آن تعریف نموده ایم) :

کد CSS :

که در آن، رنگ سیاه (با کد رنگ 000#) را در خط زیر از کدها تعیین نموده ایم (می توانید کد رنگ مربوط به هر رنگ دلخواه را به جای این کد رنگ بنویسید) :

و در خط زیر از کدها، میزان شفافیت را مشخص کرده ایم (می توانیم مقداری بین 0 تا 1 را برای آن تعیین نماییم) :

کل کدهای صفحه HTML :