Comment fondu sur les côtés des images?

Lorsque vous rendre le navigateur plus large, vous remarquerez que le côté droit et gauche de l'image est fondu dans le noir.

J'ai besoin d'appliquer la même fonction sur ma galerie, mais n'ont aucune idée. J'ai trouvé cet >> lien ainsi, mais c'est juste une ligne horizontale ne savez pas comment l'attacher à la fois à côté des images et de faire le même résultat que le lien.

Dans les commentaires, ultranaut mentionné que je peux appliquer le filtre sur les images mais la question est que si je l'applique sur les images comment ajuster la taille, parce que les fenêtres de navigateur peut-être dans la taille différente et les photos doivent être réglable pour chaque taille du navigateur.

fwiw, l'effet sur le airbnb héros de l'unité est dans les images elles-mêmes, pas de css, regardez par exemple a1.muscache.com/airbnb/static/landing_pages/home_v2/hero/...
ouais, mais je me demande comment l'appliquer à l'aide de CSS

OriginalL'auteur Daniel Morgan | 2013-03-18

  1. 11

    Voici une façon à la peau de ce chat:

    HTML:

    <div class="frame">
  <div class="fade"></div>
  <img src="picture.jpg" alt=""/>
</div>

    CSS:

    .frame {
    width: 315px;
    height: 165px;
    margin: 20px;
    position: relative;
}

.fade {
    height: 100%;
    width: 100%;
    position:absolute;
    background: -webkit-linear-gradient(left, 
                rgba(0,0,0,0.65) 0%, 
                rgba(0,0,0,0) 20%,
                rgba(0,0,0,0) 80%,
                rgba(0,0,0,0.65) 100%
    );
}

    Personnellement, je ne suis pas un grand fan de l' (sémantiquement) inutile fade div, et je suis sûr qu'il y a probablement un moyen plus malin pour faire le même effet, sans elle, mais il va travailler.

    Je n'incluait que le webkit préfixé règle, si vous voulez obtenir une pièce de théâtre, vous devez ajouter un autre fournisseur de préfixes.

    Violon ici.

    Mise à jour:
    Si l'image est de servir de fond—comme c'est le cas dans votre lié exemple—le gradient de l'image et peuvent être réglés sur le css de l'élément contenant:

    .frame {
  width: 315px;
  height: 165px;
  margin: 20px;

  background-image: url(picture.jpg);
  background-image: -webkit-linear-gradient(left, 
    rgba(0,0,0,0.9) 0%, 
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,0.9) 100%
  ),
  url(picture.jpg);
}

...

<div class="frame">
  Content...
</div>

    Moins muss, moins de tracas: nouveau style de violon avec le fournisseur de préfixes et tout et tout.

    un grand merci, mais comment faire pour changer de manière d'être exactement le même que l'exemple de site web en question? J'ai essayé de le changer mais en vain. J'ai besoin d'être exactement la même que celle de l'échantillon avec la couleur noire et le pourcentage de décoloration.
    c'est ce que color-stops faire: developer.mozilla.org/en-US/docs/CSS/...
    Je viens d'ajouter votre css pour mon :après le pseudo-élément. Fonctionne à merveille sur les navigateurs modernes

    OriginalL'auteur ultranaut

  2. 2

    En utilisant simplement CSS3, essayez un Vignette.

    Verbatim code:

    HTML:

    <p class="vignette"><img src="image.jpg"></p>

    CSS: 

    p.vignette {
  position: relative;
}
p.vignette img {
 display: block;
}
p.vignette:after {
 -moz-box-shadow: inset 0 0 10em #666;  
 -webkit-box-shadow: inset 0 0 10em #666;   
 box-shadow: inset 0 0 10em #666;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
 content: "";
}
    Je l'ai essayé. Il met une ombre sur l'image.
    veuillez copier le code à l'adresse suivante pour obtenir des résultats immédiats w3schools.com/css3/tryit.asp?filename=trycss3_background-size

    OriginalL'auteur Marc Laugharn