web-dev-qa-db-fra.com

Ajouter l'opacité de la décoloration circulaire (effet de vignette) aux images en CSS

Je veux donner l'opacité circulaire à une image en utilisant CSS.

Je sais que je peux atteindre l'opacité sur des images comme celle-ci:

.circle img {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

Je sais que je peux réaliser des images circulaires comme ceci:

.circle {
    border-radius: 50%;
    display: inline-block;
}
.circle img {
    border-radius: 50%;
    display: block;
}

Je veux en quelque sorte fusionner les deux choses ci-dessus et appliquer l'opacité uniquement pour les bords de l'image, de sorte que le centre de l'image ne reçoive presque rien de la balise d'opacité. J'ai cherché pendant des heures mais je n'ai rien trouvé.

Sans opacité: http://jsfiddle.net/8w6szf84/47

Avec opacité: http://jsfiddle.net/8w6szf84/48/ -> mauvaise opacité, ne voulez que les bords s'estompent ...

Dois-je utiliser Javascript à ce sujet? Aucune suggestion?

htmlcssopacity
30
balintpekker

Ok, donc ce que nous pouvons faire est de créer un :after élément qui sera égal à la taille du parent. En utilisant cela, nous pouvons définir un dégradé d'arrière-plan qui le fera apparaître lorsque l'image s'estompe dans l'arrière-plan de couleur unie .

Remarque: Dans cet exemple, j'ai agrandi l'élément dégradé et l'ai déplacé sur 1px pour empêcher l'apparition d'une bordure autour d'elle. De là, vous pouvez jouer pour obtenir l'effet parfait que vous souhaitez.

.circle {
    border-radius: 50%;
    display: inline-block;
    position: relative;
}
.circle img {
    border-radius: 50%;
    display: block;
    border:1px solid #fff;
}
.circle:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%);
    border-radius: 50%;
    position: absolute;
    top: 0; left: 0;
}
<div class="circle">
    <img src="http://placeimg.com/200/200/any" />
</div>

Edit: Voici une autre version sans définir une hauteur ou une largeur et se débarrasser de la bordure qui se produit si vous utilisez 100% du parent. Comme Vucko l'a souligné, nous n'avons pas besoin des valeurs négatives pour la position mais pouvons utiliser un border autour du img au lieu.

JsFiddle ici

34
Ruddy

vous pouvez également utiliser un shadow box

.shadow {
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.shadow img {
  border-radius: 50%;
  display: block;
  border: 1px solid #fff;
}
.shadow:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset 10px 24px 40px 0px white, 
    inset -10px -24px 40px 0px white, 
    inset 20px -10px 40px 0px white, 
    inset -20px 10px 40px 0px white;
}
<div class="shadow">
  <img src="http://placeimg.com/200/200/any" />
</div>
7
Vitorino fernandes

Vous pouvez utiliser deux (des mêmes) images et avoir celle du haut plus petite et transparente.

.circle-opaque {
    border-radius: 50%;          /* Make it a circle */
    display: inline-block;       
    position: absolute;          /* Able to position it, overlaying the other image */
    left:0px;                    /* Customise the position, but make sure it */
    top:0px;                     /* is the same as .circle-transparent */
    z-index: -1;                 /* Makes the image sit *behind* .circle-transparent */
}
.circle-opaque img {
    border-radius: 50%;          /* Make it a circle */
    z-index: -1;
}
.circle-transparent {
    border-radius: 50%;          /* Make it a circle */
    display: inline-block;       
    position: absolute;          /* Able to position it, overlaying the other image */
    left: 0px;                   /* Customise the position, but make sure it */
    top: 0px;                    /* is the same as .circle-transparent */
    z-index: 1;                  /* Makes the image sit *on top of* .circle-transparent */
}
.circle-transparent img {
    width: 200px;
    opacity: 0.4;                /* Make the second image transparent */
    filter: alpha(opacity=40);   /* For IE8 and earlier; optional */
    z-index: 1;                  /* And on top of the first */
}
<div class="circle-opaque">
    <img src="http://www.catchannel.com/images/articles/0805/orange-kitten-200px.jpg" />
</div>
<div class="circle-transparent">
    <img src="http://www.catchannel.com/images/articles/0805/orange-kitten-200px.jpg" />
</div>

http://jsfiddle.net/joe_young/20y832r7/

6
joe_young

Voici une version modifiée de la réponse de Ruddy sauf que le diamètre du dégradé correspond à la largeur (ou la hauteur) de l'image au lieu de la diagonale. Le rayon de bordure n'est pas requis. 80% de l'image s'affiche telle quelle, les 20% restants passent du transparent au blanc.

.circle {
  display: inline-block;
  position: relative;
}
.circle img {
  display: block;
}
.circle:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle closest-side at center,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0) 80%, 
    rgba(255, 255, 255, 1) 100%
  );
}
<div class="circle">
  <img src="http://www.catchannel.com/images/articles/0805/orange-kitten-200px.jpg">
</div>

Notez que les dégradés radiaux sont dessinés à partir du centre spécifié; tandis que les ombres du cadre sont dessinées à partir des bords; par conséquent, les deux produisent des résultats différents.

2
Salman A

Bien que cette approche ne soit pas aussi propre que d'autres (peut-être en raison du manque de temps), je pense qu'elle pourrait être nettoyée. Cependant, il utilise uniquement des ombres de boîte pour obtenir le look auquel vous pensez. (Les gradients radiaux seraient peut-être préférés, bien que si vous avez besoin d'un repli, cela pourrait être une option)

div {
  height: 300px;
  width: 300px;
  background: url(http://placekitten.com/g/300/400);
  border-radius: 50%;
  box-shadow: 
    inset -5px -5px 100px white, 
    inset 0 0 90px white, 
    inset 0 0 80px white, 
    inset 0 0 70px white, 
    inset 0 0 60px white, 
    inset 0 0 50px white, 
    inset 0 0 40px white, 
    inset 0 0 30px white, 
    inset 0 0 20px white, 
    inset 0 0 10px red; 
}
<div></div>
1
jbutler483

J'aime simple, donc ce qui suit pourrait suffire:

.circle {
  background-image: radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
  display: inline-block;
}
.circle img {
  border-radius: 50%;
  mix-blend-mode: lighten;
}
<div class="circle">
  <img src="http://www.catchannel.com/images/articles/0805/orange-kitten-200px.jpg" />
</div>
0
Robert McKee