html - tipos - Añadir opacidad de desvanecimiento circular(efecto de viñeta) a las imágenes en CSS
tipos de viñetas en html (6)
Aquí hay una versión modificada de Ruddy''s respuesta de Ruddy''s excepto que el diámetro del degradado coincide con el ancho (o alto) de la imagen en lugar de la diagonal. No se requiere radio de borde. El 80% de la imagen se muestra como está, el 20% restante se desvanece de transparente a blanco.
.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>
Tenga en cuenta que los gradientes radiales se dibujan desde el centro especificado; mientras que las sombras del cuadro se dibujan desde los bordes; por lo tanto ambos producen resultados diferentes.
Quiero dar opacidad circular a una imagen usando CSS.
Sé que puedo lograr opacidad en imágenes como esta:
.circle img {
opacity: 0.4;
filter: alpha(opacity=40);
}
Sé que puedo lograr imágenes circulares como esta:
.circle {
border-radius: 50%;
display: inline-block;
}
.circle img {
border-radius: 50%;
display: block;
}
De alguna manera, quiero unir las dos cosas de arriba y aplicar la opacidad solo a los bordes de la imagen, de modo que el centro de la imagen no obtiene casi nada de la etiqueta de opacidad. He buscado durante horas pero no he encontrado nada.
Sin opacidad: http://jsfiddle.net/8w6szf84/47
Con opacidad: http://jsfiddle.net/8w6szf84/48/ -> mala opacidad, solo desea que los bordes se desvanezcan ...
¿Necesito usar Javascript en esto? ¿Alguna sugerencia?
Aunque este enfoque no es tan limpio como otros (posiblemente debido a la falta de tiempo), creo que podría limpiarse. Sin embargo, está usando solo casillas de sombras para lograr el aspecto que está pensando. (Posiblemente se preferirían gradientes radiales, aunque si necesita un respaldo, esta podría ser una opción)
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>
Me gusta simple, por lo que lo siguiente podría ser suficiente:
.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>
Ok, entonces lo que podemos hacer es crear un elemento :after que será igual al tamaño del padre. Con esto podemos establecer un degradado de fondo que lo hará aparecer a medida que la imagen se desvanece en el fondo de color sólido .
Nota: en este ejemplo, he hecho que el elemento de degradado sea un poco más grande y lo moví sobre 1px para evitar que un borde aparezca alrededor de él. Desde aquí puedes perder el tiempo para obtener el efecto perfecto que deseas.
.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>
Editar: Aquí hay otra versión sin establecer un alto o ancho y deshacerse del borde que se causa si se usa el 100% del padre. Como señaló Vucko , no necesitamos los valores negativos para la posición, pero podemos usar un border alrededor del img .
Podrías usar dos (de las mismas) imágenes y tener la superior más pequeña y 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>
También puedes usar una caja de sombra.
.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>