box-shadow<div>要素内の画像に。

Question

例えば以下の様にマークアップした画像があります。

<div class="Wrapper">
		<img src="home" alt="" height="600" width="600" border="0">
</div>

.Wrapper {
			width:300px;
			height: 150px;
			border:1px solid #000;
			overflow: auto;
			box-shadow:0px 1px 3px rgba(216,213,213,1) inset;
		}

この時<div>の内側にシャドウを入れたいのですが、画像にはシャドウがかかりません。スクロールして画像の上にシャドウがくるような方法はありますか？

Answer 1

シャドウを見やすくするのに、濃くしてます。画像のパスは私のローカルのやつをてきとうに当ててますのでご了承ください。

以下は、スクロールバーの出るタイプ。

<style type="text/css">
html { width:300px;}
.Wrapper {
    width:300px;
    height: 150px;
    border:1px solid #000;
    overflow: hidden;
}
.WrapperInner {
    width:300px;
    height: 150px;
    overflow: auto;
    position:relative;
}
img { display:block; position:relative;}
.WrapperInner:after { content:''; width:600px; height:600px; display:block; box-shadow:0px 0px 10px rgba(0,0,0,1) inset; position:absolute; top:0; left:0;}
</style>
<div class="Wrapper">
	<div class="WrapperInner">
        <img src="demo1.png" alt="" height="600" width="600" border="0">
	</div>
</div>

スクロールバーをオーバーフローで見えなくした感じ。ただし横スクロールできない。

<style type="text/css">
html { width:300px;}
.Wrapper {
    width:300px;
    height: 150px;
    border:1px solid #000;
    overflow: hidden;
}
.WrapperInner {
    width:315px;
    height: 165px;
    overflow: auto;
    position:relative;
}
img { display:block; position:relative;}
.WrapperInner:after { content:''; width:600px; height:600px; display:block; box-shadow:0px 0px 10px rgba(0,0,0,1) inset; position:absolute; top:0; left:0;}
</style>
<div class="Wrapper">
	<div class="WrapperInner">
        <img src="demo1.png" alt="" height="600" width="600" border="0">
	</div>
</div>

うーん、それともこうかなぁ。スクロールバーの内側に設置。これかな？

<style type="text/css">
html { width:300px;}
.Wrapper {
    width:300px;
    height: 150px;
    border:1px solid #000;
    overflow: hidden;
	position:relative;
}
.WrapperInner {
    width:300px;
    height: 150px;
    overflow: auto;
    position:relative;
}
img { display:block; position:relative;}
.Wrapper:after { content:''; width:285px; height:135px; display:block; box-shadow:0px 0px 10px rgba(0,0,0,1) inset; position:absolute; top:0; left:0;pointer-events: none;}
</style>
<div class="Wrapper">
	<div class="WrapperInner">
        <img src="demo1.png" alt="" height="600" width="600" border="0">
	</div>
</div>

Comments

[YuichiKataoka]

できました。ありがとうございます。
応用して使ってみます。

Answer 2

次の様に要素を一つ増やせば可能ですが、そのままだと難しいのではないでしょうか。

<div class="Wrapper">
    <div class="Image">
        <img src="home" alt="" height="600" width="600" border="0">
    </div>
</div>

*CSSを修正しました

.Wrapper {
    overflow: hidden;
    position: relative;
    width: 300px;
    height: 150px;
    margin: 50px;
    border: 1px solid #000;
}

.Wrapper::before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 300px;
    height: 150px;
    content: "";
    box-shadow: 0 1px 3px rgba(213,213,213,1) inset;
    pointer-events: none; /* IEは11から対応 */
}

.Image {
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
}

Comments

[flat]

すみません、少し勘違いしていた様です。
これだと上部にしかシャドウがかからないですね。

Answer 3

へー、スマホサイトですかね？
おもしろいですね。

html { width:300px;}
.Wrapper {
	width:300px;
	height: 150px;
	border:1px solid #000;
	overflow: auto;
	position:relative; /* 追記 */
}
img { display:block; position:relative;} /* 追記 */
.Wrapper:after { content:''; width:600px; height:600px; display:block; box-shadow:0px 1px 3px rgba(216,213,213,1) inset; position:absolute; top:0; left:0;} /* 追記 */

Comments

[YuichiKataoka]

回答ありがとうございます。
教えて頂いたcssを適用すると、初期状態だとシャドウがかかるのですが
スクロールするとシャドウがかかりません。

当方のMacのChorome、Safari、Firefoxで確認しています。

[1000]

あれ、スマホじゃなかったですか？
通常のパソコン用ブラウザで見るとオーバーフローでスクロールバーが出るので意図しない形になるのかなと推測できましたが、どうでしょ？
であればほとんどのブラウザでスクロールバーのサイズが15pxなので、外枠を入れ子にすればいけるかと。
ただしスマホとPCでメディアクエリかjsで処理をわけないとだめですが。
スマホからの投稿につき、具体的なソースが無くてすみません。

[YuichiKataoka]

スマホではなく、PCからの閲覧でうまくいきません。（スマホはすいません、確認していないです）

＞外枠を入れ子にすればいけるかと。
時間があるときで良いので、具体的なコードを教えて頂けると非常に助かります。

Answer 4

擬似要素をdivと同じサイズで重なるように配置して、z-indexで手前に持ってきてbox-shadowをつけてやればいいんじゃないでしょうか？
もしかして見当違いなこと言ってますかね。

Comments

[YuichiKataoka]

ありがとうございます。
まだやっていないのですが、参考となるページなど方法ありましたら教えて頂けますでしょうか？

Answer 5

img要素ではなく、background-imageプロパティであれば影がかかるようですが、それは難しいのでしょうか？

Comments

[YuichiKataoka]

<img>が複数あるため、それは難しいです。
ありがとうございます。