Ajouter une opacité de décoloration circulaire (effet vignette) aux images en CSS
Je veux donner opacité circulaire à une image en utilisant CSS.
Je sais que je peux atteindre l'opacité sur des images comme ceci:
.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 n'obtient presque rien de la balise opacité. J'ai cherché pendant des heures mais rien trouvé.
Sans opacité: http://jsfiddle.net/8w6szf84/47
Avec opacité: http://jsfiddle.net/8w6szf84/48/ - > mauvaise opacité, ne veulent que les bords à s'estomper...
Dois-je utiliser Javascript à ce sujet? Toutes les suggestions?
6 réponses
Ok, donc ce que nous pouvons faire est de créer un élément :after 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 le fond de couleur solid.
Note: dans cet exemple, j'ai agrandi un peu l'élément dégradé et l'ai déplacé sur 1px pour empêcher une bordure d'apparaître autour de lui. De là, vous pouvez jouer pour obtenir l'effet parfait que vous voulez.
.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 de hauteur ou de largeur et se débarrasser de la bordure qui est causée si vous utilisez 100% de parent. Comme Vucko l'a souligné, Nous n'avons pas besoin des valeurs négatives pour la position, mais nous pouvons utiliser un border autour du img à la place.
Vous pouvez également utiliser une boîte-ombre
.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>Vous pouvez utiliser deux (de la même) images et avoir la 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>Voici une version modifiée de la réponse deRuddy 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 la frontière n'est pas requis. 80% de l'image s'affiche telle quelle, Les 20% restants passant 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 de boîte sont dessinées à partir des bords; par conséquent, les deux produisent des résultats différents.
Bien que cette approche ne soit pas aussi propre que les autres (peut-être par manque de temps), je crois que pourrait être nettoyé. Cependant, il utilise juste des ombres de boîte pour atteindre le look auquel vous pensez. (Les gradients radiaux seraient éventuellement 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>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>