3D与图象的作用作为另一个图象背景

Question

我正在尝试为图像添加3D效果，最终结果应该看起来 如下所示:(在Photoshop中说明）

我尝试过使用css3属性box-shadow 但它不提供真实的3D效果，如下图所示： （我知道我可以将模糊设置为0并改变边，但正如您所看到的那样 - 角落与我想要实现的box-shadow结果之间存在差异< / p>

在找不到唯一的CSS解决方案后 - 我创建了以下图像并将其设置为图像本身的背景。

JSFIDDLE *请注意 - 我正在使用bootstrap框架。

HTML

<img src="" class="img-responsive framed">

CSS

.framed{
background-image: url('URL-OF-THE-FRAME');
padding-left: 5px; //The thickness of the "line"
padding-bottom: 5px; //The thickness of the "line"
background-size: cover;
}

.img-responsive{
display: block;
max-width: 100%;
height: auto;
}

这给出了我想要的结果 - 但是， 如果你重新调整窗口的大小（尝试在jsfiddle中放大结果的窗口） 正在创建图像和框架之间的距离。

我应该尝试另一种策略还是我在这里错过了什么？

Answer 1

您需要使用百分比填充，以便在调整窗口大小时将其添加到图像/容器的大小。

<强> DEMO

CSS：

.framed{
    background-image: url('http://www.6pix.co/images/shadow-3.png');  
    padding-left: 2.9%;  
    padding-bottom: 2.9%;  
    background-size: cover;  
}