1

内部に背景画像がある固定サイズの div があり、背景サイズを使用して、その中に収まるように画像のサイズを変更します。私が問題を抱えているのは、div全体ではなく、サイズ変更された画像に合わせたドロップ シャドウを取得する方法を理解しようとすることです。

例えば

    #picture-container {
        width: 200px;
        height: 200px;
        background: url('image.png') no-repeat center;
        background-size: contain;
        box-shadow: 0px 0px 10px #000000;
    }
4

3 に答える 3

1

できません-仕様によると、ボックスシャドウはdivに適用されます。試行された回避策には、絶対位置の img 要素を div 内 (相対的な位置) に配置する、img の最大幅を 100% に設定する、img タグにボックス シャドウを配置するなどがあります。

あなたがやろうとしていることを模倣する驚くほど非セマンティックな JS フィドルが添付されています。

http://jsfiddle.net/VbFfL/1/

<div id="div2">
    <span><span><img src="http://placekitten.com/400/200"></span></span>
</div>

div のアウトラインが見えるように枠線が追加されました。

于 2013-09-07T00:14:52.187 に答える