web-dev-qa-db-ja.com

CSSの画像に円形のフェージング不透明度（ビネット効果）を追加する

CSSを使用して画像に円形の不透明度を与えたいです。

私はこのような画像で不透明度を達成できることを知っています：

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

私はこのような円形の画像を実現できることを知っています：

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

どういうわけか、上記の2つをマージし、画像のエッジにのみ不透明度を適用して、画像の中心が不透明度タグからほとんど何も取得しないようにします。時間を検索しましたが何も見つかりませんでした。

不透明度なし： http://jsfiddle.net/8w6szf84/47

不透明度： http://jsfiddle.net/8w6szf84/48/ ->不透明度が低く、エッジのみをフェードさせたい...

これでJavaScriptを使用する必要がありますか？助言がありますか？

htmlcssopacity
30
balintpekker

では、親のサイズと同じ:after要素を作成します。これを使用して、画像がsolid色の背景にフェードインするときに表示される背景のグラデーションを設定できます。

注：この例では、グラデーション要素を少し大きくして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

34
Ruddy

ボックスシャドウを使用することもできます

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

（同じ）2つの画像を使用して、上部の画像を小さく透明にすることができます。

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

6
joe_young

グラデーションの直径が対角線ではなく画像の幅（または高さ）と一致していることを除いて、 Ruddy's の回答の修正版を次に示します。ボーダー半径は必要ありません。画像の80％はそのまま表示され、残りの20％は透明から白にフェードします。

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

放射状グラデーションは指定された中心から描画されることに注意してください。一方、ボックスの影は端から描画されます。したがって、どちらも異なる結果になります。

2
Salman A

このアプローチは他のアプローチほどきれいではありませんが（おそらく時間が不足しているため）、それはcouldクリーンアップされると思います。ただし、ボックスシャドウだけを使用して、考えている外観を実現しています。 （放射状グラデーションが望ましいかもしれませんが、フォールバックが必要な場合、これはオプションになる可能性があります）

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>
1
jbutler483

私はシンプルが好きなので、以下で十分かもしれません：

.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>
0
Robert McKee