کد تغیر رنگ و gradient شفاف روی یک تصویر

Gradient ها با دستور background-imageاعمال می شوند و می توانند بخشی از  کد های css در تگ image باشند و شما می توانید یک gradient شفاف را روی یک تصویر دیگر بیندازید.

کد های html

<div class="tinted-image"></div>

کد های css

.tinted-image { width: 300px; height: 200px; background: /* top, transparent red */ linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), /* bottom, image */ url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg); }