web-dev-qa-db-fra.com

Fondu d'image transparent comme un dégradé

Je voudrais qu'une image (une image d'arrière-plan) passe en transparent pour que le contenu derrière soit réellement visible (à peine, grâce à la transparence).

Je peux y arriver évidemment avec une image PNG, mais je dois demander à mon graphiste de changer l'image à chaque fois que je veux changer le début => arrêter les points de transparence (peut-être que je veux plus de couleur ou peut-être que je veux moins de couleur et plus transparence).

Y a-t-il une chance que je puisse obtenir le même effet avec CSS3? J'ai essayé d'appliquer un dégradé à transparent sur un jpg (et un png) mais je ne peux pas le voir à moins que le PNG ait déjà de la transparence (et essentiellement le dégradé) déjà fait (ce qui rend le dégradé css inutile).

Toute suggestion? Je fouille dur sur le Web, mais il semble que je n'utilise pas le bon mot-clé ou ce n'est peut-être pas possible.

Mise à jour 1:

Le code dit plus que beaucoup de mots, je voudrais faire quelque chose comme ça (mais la syntaxe est évidemment fausse):

background: linear-gradient(to bottom, rgba(url('splash_bottom3.png'), 0.0), rgba(url('splash_bottom3.png'), 1.0));
csscss3gradient
34
Fire-Dragon-DoL

Si tu veux ça:

enter image description here

Tu peux le faire:

<html>
  <style type='text/css'>
    div, img { position:absolute; top:0; left:0; width:250px; height:250px; }
    img {
      -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
      mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    }
  </style>
  <body>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>
    <img src='https://i.imgur.com/sLa5gg2.jpg' />
  </body>
</html>
51
bishop

Si vous souhaitez simplement estomper la couleur d'arrière-plan (blanc, dans ce cas), consultez l'exemple de travail ici:

http://jsfiddle.net/yw9v7zm5/

.css pour le conteneur d'images que div utilise:

background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
23
Rowe Morehouse