在html中如何写图片渐变,html – 在CSS中的图像中添加圆形渐变不透明度(晕影效果)...

好的，所以我们可以做的是创建一个：后元素将等于父的大小。使用这个，我们可以设置一个背景渐变，使它出现的图像正在渐变为纯色背景。

注意：在这个例子中，我已经使渐变元素有点大，并移动它超过1px，以阻止边框出现在它周围。从这里你可以乱搞得到你想要的完美的效果。

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

}

编辑：这里是另一个版本，没有设置高度或宽度，并摆脱边界，如果使用100％的父项导致的边界。正如Vucko指出的，我们不需要位置的负值，但可以使用img周围的边框。