Question

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

e.g

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

Answer 1

你不能 - 盒子阴影，根据规范，适用于div。尝试的解决方法包括在div中放置一个绝对定位的img元素（相对位置），将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的轮廓。

Answer 2

将img添加到div，然后对其应用阴影。

HTML：

<div id="picture-container">
    <img id="image" src="http://phandroid.s3.amazonaws.com/wp-content/uploads/2013/09/Samsung-Galaxy-Gear-6-colors-side-640x361.jpg">
</div>

CSS：

#picture-container {
        width: 200px;
        height: 200px;
        background-color: red; 
    }
#image
{
    max-width: 100%;
    box-shadow: 0px 0px 10px #000000;
}

工作Fiddle。

如何在背景大小的元素上使用box-shadow：contains？

2 个答案: