web-dev-qa-db-fra.com

CSS - Transparence du dégradé linéaire des deux côtés de l'image

tl; dr

Existe-t-il un moyen d'ajouter de la transparence aux images en CSS avec -webkit-linear-gradient à gauche et à droite de l'image?

Version longue

J'ai une image que je veux ajouter de la transparence - avec du CSS pur - des deux côtés en évitant d'utiliser n'importe quel éditeur d'image comme Photoshop, Gimp, etc. J'ai essayé d'utiliser -webkit-linear-gradient mais il utilise la fonction rgba () pour définir les arrêts de couleur.

Donc, cet extrait

height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));

est ce que ca:

enter image description here

Dans cet exemple, le dernier paramètre de rgba () définit la transparence de la couleur. Jusqu'ici tout va bien. Si je mets right dans le -webkit-linear-gradient l'image ci-dessus montrerait le contraire. (Vous ne dites pas?!)

Je veux en quelque sorte fusionner les deux et créer un dégradé qui devient transparent des deux côtés. Seulement pas avec dégradé. Avec une image.

J'ai également essayé de contourner avec box-shadow et radial-gradient mais je n'ai pas pu le comprendre.

Existe-t-il un moyen possible d'ajouter de la transparence à gauche et à droite d'une image en utilisant uniquement CSS?

ÉDITER:

Exemple: enter image description here

csstransparencylinear-gradients
14
balintpekker

Vous pouvez utiliser un div wrapper, puis utiliser des arrêts de couleur:

div {
  position: relative;
  display: inline-block;
}
div:before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(49%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* IE10+ */
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
  /* IE6-9 */
}
<div>
  <img src="http://placekitten.com/g/300/300" alt="" />
</div>

Ressources

20
jbutler483
.image {
  position: relative;
}

.image::after {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to right, currentColor 5%, transparent 30%);
  }

.image::before {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to left, currentColor 5%, transparent 30%);
  }
<div class="image">
  <img src="http://placekitten.com/800/400"/>
</div>

Une façon que j'ai trouvée pour ce faire est d'utiliser des pseudo-classes et de les empiler les unes sur les autres. Assurez-vous que le conteneur d'images est relativement positionné et qu'il devrait fonctionner pour vous (voir l'exemple).

0
JimRush