box-shadowのinsetが適用されない

Question

発生している問題

imgの内側にぼかしとして適用したいのですが、box-shadowのinsetだけ適用されません。
insetを消すとしっかり影が出てきます。
内側に隠れているのだとしても前面に出す方法がわからないです。
ご教授お願い致します。

該当のソースコード

      <div class="fade">
        <img src="img/mainvisual1.jpg" alt="">
      </div>

.fade img{
  width: 100%;
  box-shadow:  0px 0px 20px 20px #fff inset;
}

Answer 1

Lhankor_Mhyさんのアイデアを試してみました。

<div class="parent">
  <h1>画像の内側にbox-shadow</h1>
  <div class="fade" id="shadow">
    <img src="https://api.lorem.space/image/movie?w=800&h=200" alt="">
  </div>
</div>

img {
  max-width: 100%;
  display: block;
}

.fade {
  max-width:800px;
  position: relative;
  margin: auto;
}


.fade::before{
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  display: block;
  border: 1px solid red;
  box-shadow: 0px 0px 20px 10px tomato inset;
}

なんでabsoluteしてサイズ100%指定した::beforeが
.fade要素を飛び越えないんだろう…？？という疑問が湧きました。

サンプル
https://codepen.io/recal/pen/NWavMXE

Comments

[退会済みユーザー]

Lhankor_Mhyさんの解決法のコードまで書いていただきありがとうございます。

[Lhankor_Mhy]

仲直りしたんですね、よかったよかった。

---

> .fade要素を飛び越えないんだろう…？？

包含ブロックを参照するからです。
https://developer.mozilla.org/ja/docs/Web/CSS/height#%E5%80%A4

[recal]

横からしゃしゃり出てすみません、
試してみたくなっちゃって。

div::beforeは
<div></div>::before になるんだとばかり思ってました
実際には
<div>::before</div> に、なってるんですね。
勉強になりました、ありがとうございます。

Answer 2

inset な影は背景の上、境界や内容の下に描画されます。

box-shadow - CSS: カスケーディングスタイルシート | MDN

とのことですので、画像の下にあるのでしょう。

ですので、解決方法としては画像とは別に要素を用意して重ね合わせるのがいいのではないでしょうか。

Comments

[退会済みユーザー]

なるほど、、ありがとうございます。