CODE
<!DOCTYPE html> <html> <head> <title>Exemple: la propriété background-blend-mode </title> <style> div { width: 300px; height: 300px; background-size: 300px 300px; background-repeat:no-repeat; background-image: linear-gradient(to left, black 0%,white 100%), url('http://www.oujood.com/images/logo.png'); background-blend-mode: multiply; } p{font-size: 1.5em; } </style> </head> <body> <div></div> <p><b>Note:</b> Internet Explorer ne prend pas en charge la propriété background-blend-mode.</p> </body> </html>
Vous devez bien entendu modifier les valeurs de...
width: 300px; height: 300px; background-size: 300px 300px;
...pour obtenir une bonne mise en page car il est probable que ce qui apparaitra sur votre écran sera différent de ce qui apparait sur le mien.
Pour obtenir l'image, vous devez faire un copier/coller du code ci-dessus en adaptant les valeurs.