فرض کنید می خواهیم در فوتر از عکس استفاده کنیم و برای اینکه آیتم های منو دیده شوند، لازم است تا یک فیلتر رنگی روی آن بندازیم. این کار را می توانیم با استفاده از overlay انجام دهیم.

برای اینکار لازم است تا یک div دیگر داخل div اصلی تعریف کنیم:

<div>
        <div className="footer">

        <div className="footer-overlay"></div>
</div>

برای کد css از نمونه زیر استفاده کنید:

.footer
{
    height: 400px !important;
    background-color: #fff;
    background-image: url("../images/photo-1562886889-4ff7af0602ef.jpeg");
    background-size: cover;
    transition: background .3s,border .3s,border-radius .3s,box-shadow .3s;

}
.footer-overlay
{
    background-color: #282828;
    height: 400px !important;
    opacity: .86;
    transition: background .3s,border-radius .3s,opacity .3s;
    
}