Help us understand the problem. What is going on with this article?

CSSで写真の四隅を暗くする(ビネット効果)

More than 3 years have passed since last update.

トイカメラで撮影すると 写真の四隅が暗くなる現象(ビネット効果)をCSSで再現します。

sample.png

こんな感じです

imgタグを使う場合

<div class="vignette">
  <img src="sample.JPG">
</div>
div{
  position: relative;
  width: 320px; height: 240px;
}

div img{
  width: 100%;
}

/* ビネット効果 */
.vignette:before{
  content: '';
  position: absolute;
  top: 0; left: 0;

  width: 100%; height: 100%;

  background: 
    radial-gradient(circle at 50% 50%, transparent 70%, black 90%);

  z-index: 2;
}

円形グラデーションを使って表現しています。
画像の上に四隅を暗くしたグラデーションを乗せるだけです。

背景画像として使う場合

<div class="img"></div>
.img{
  width: 320px; height: 240px;

  background: 
    radial-gradient(circle at 50% 50%, transparent 70%, black 90%),
    url(sample.JPG) 0 0 / cover;
}

backgroundのurl()がうさぎ画像、 radial-gradient()がビネット効果です。
重要なのは、指定した順に画面手前から画面奥に向かって描画されていくので

background: 
  url(sample.JPG) 0 0 / cover,
  radial-gradient(circle at 50% 50%, transparent 70%, black 90%);

画像を先に指定すると ビネット効果が得られません。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away