html - 如何在背景大小为 :contain? 的元素上使用框阴影

Question

我有一个固定大小的 div，里面有一个背景图像，我使用 background-size: contain 来调整图像的大小以适应它的内部。我遇到问题的地方是试图了解如何获得与调整后的图像对齐的投影，而不是整个 div。

例如

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

Answer 1

你不能 - 根据规范，box-shadow 适用于 div。尝试过的解决方法包括将一个绝对定位的 img 元素放在您的 div 中(相对位置)，将 img 设置为 100% 的最大宽度并将框阴影放在 img 标签上。

附加了非常无语义的 JS fiddle ，模仿你正在尝试做的事情:

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

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

添加了边框，以便您可以看到 div 的轮廓。