在CSS中为图像添加圆形褪色不透明度(渐晕效果) [英] Add circular fading opacity (vignette effect) to images in CSS

问题描述

我想使用CSS为图像提供圆形不透明度.

I want to give circular opacity to an image using CSS.

我知道我可以在这样的图像上实现不透明:

I know I can achieve opacity on images like this:

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

我知道我可以像这样获得圆形图像:

I know I can achieve circular images like this:

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

我想以某种方式合并上面的两件事，并将不透明度仅应用于图像的边缘，因此图像的中心几乎不会从opacity标签中获得任何东西.我已经搜索了几个小时，却一无所获.

I want somehow to merge the two things above and apply the opacity only for the edges of the image, so the center of the image gets almost nothing from the opacity tag. I have searched for hours but found nothing.

不透明: http://jsfiddle.net/8w6szf84/47

不透明: http://jsfiddle.net/8w6szf84/48/->错误不透明，只希望边缘变淡...

With opacity: http://jsfiddle.net/8w6szf84/48/ -> bad opacity, want only the edges to fade...

我需要在此使用Javascript吗?有什么建议吗?

Do I need to use Javascript on this? Any suggestions?

推荐答案

好，所以我们可以做的是创建一个:after元素，该元素将等于父元素的大小.使用此设置，我们可以设置背景渐变，使其在图像逐渐淡入纯色彩色背景时显示.

Ok, so what we can do is create a :after element that will be equal to the size of the parent. Using this we can set a background gradient that will make it appear as the image is fading into the solid colour background.

注意::在此示例中，我使渐变元素变大了一点并将其移到1px上方，以防止边框出现在其周围.在这里，您可以四处乱转以获得所需的完美效果.

Note: In this example I have made the gradient element a little bigger and moved it over 1px to stop a border from appearing around it. From here you can mess around to get the perfect effect that you want.

.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>

这是另一个版本，其中未设置高度或宽度，并且消除了使用父级100%时引起的边框.正如 Vucko 所指出的那样，我们不需要该头寸的负值，而是可以在img周围使用border.

Here is another version without setting a height or width and getting rid of the border that gets caused if using 100% of parent. As Vucko pointed out we don't need the negative values for the position but can use a border around the img instead.

此处是JsFiddle

这篇关于在CSS中为图像添加圆形褪色不透明度(渐晕效果)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！