Question

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

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

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

我知道我可以实现这样的圆形图像：

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

我想以某种方式合并上面的两件事并仅对图像的边缘应用不透明度，因此图像的中心几乎不会从不透明度标签中获取任何内容。我搜索了几个小时但什么都没找到。

没有不透明度：http://jsfiddle.net/8w6szf84/47

不透明度：http://jsfiddle.net/8w6szf84/48/ - ＆gt;糟糕的不透明度，只希望边缘消失...

我需要在这上面使用Javascript吗？有什么建议吗？

Answer 1

好的，我们可以做的是创建一个:after元素，该元素将等于父元素的大小。使用此功能，我们可以设置背景渐变，使其在图像淡入实体颜色背景时显示。

注意：在此示例中，我将渐变元素放大一点，并将其移到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;
}

<div class="circle">
    <img src="http://placeimg.com/200/200/any" />
</div>

编辑：这是另一个版本，没有设置高度或宽度，并且摆脱了使用父级100%时导致的边框。正如 Vucko 所指出的那样，我们不需要该位置的负值，而是可以使用border周围的img代替。

JsFiddle Here

Answer 2

你也可以使用盒子阴影

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

Answer 3

您可以使用两个（相同的）图像，并使顶部的图像更小且更透明。

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

Answer 4

这是Ruddy's答案的修改版本，只是渐变的直径与图像的宽度（或高度）匹配而不是对角线。边界半径不是必需的。 80％的图像按原样显示，剩下的20％从透明变为白色。

＆＃13;

.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%
  );
}

＆＃13;

<div class="circle">
  <img src="http://www.catchannel.com/images/articles/0805/orange-kitten-200px.jpg">
</div>

＆＃13;

请注意，径向渐变是从指定的中心绘制的;从边缘绘制框阴影;因此两者都产生不同的结果。

Answer 5

虽然这种方法不像其他方法那样干净（可能是因为时间不够），但我相信可以清理干净。但是，它只使用框阴影来实现您的想法。（径向渐变可能是首选，但如果你需要回退，这可能是一个选项）

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 6

我喜欢简单，所以以下内容可能就足够了：

＆＃13;

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

＆＃13;

<div class="circle">
  <img src="http://www.catchannel.com/images/articles/0805/orange-kitten-200px.jpg" />
</div>

＆＃13;

在CSS中为图像添加圆形淡化不透明度（晕影效果）

6 个答案: