2022/2/7 （更新日: 2022/2/12）

【CSS】写真と背景色を重ねてずらす表現方法　

CSS

写真と背景色をずらすのってどうやるの？

そんな疑問にお答えします。

写真と背景色を重ねてずらす表現はよくWebサイトで目にします。

こんな感じのものです。

写真にずらし装飾を施す

単に写真だけの場合よりも目を引きますよね。

コーディングをしているとこの表現方法はどこかで出てきますので、コードの書き方をしっかり身につけておきたいです。

今回はこのCSSの書き方を３パターン紹介します。

1 疑似要素
2 box-shadow
3 linear-gradient

疑似要素

See the Pen
背景をずらす1 by toshi (@toshi78)
on CodePen.

.picture {
  margin: 30px auto;
  width: 300px;
  position: relative;
}

.picture::after {
  content: " ";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 100%;
  height: 100%;
  background-color: #C0C0C0;
  z-index: -1;
}

💡ポイント！　

親要素に「position: relative;」子要素に「position: absolute;」
「right: -30px;」「bottom: -30px;」で右下にずらす
「z-index: -1;」で重なり順を指定

box-shadow

See the Pen
背景をずらす2 by toshi (@toshi78)
on CodePen.

.picture {
  margin: 30px auto;
  width: 300px;
  box-shadow: 30px 30px 0 #C0C0C0;
}

💡ポイント！　

「box-shadow: 30px 30px;」で右に30px、下に30pxの影をつける

linear-gradient

See the Pen
背景をずらす3 by toshi (@toshi78)
on CodePen.

.picture {
  margin: 30px auto;
  width: 300px;
  height: 160px;
  position: relative;
  background: linear-gradient(90deg, transparent 10%, #c0c0c0 10%);
}

.picture img {
  position: absolute;
  top: -50px;
  width: 90%;
}

💡ポイント！　