用图像作为其它图像的背景3D效果(3D effect with image as a backgro

我想一个3D效果添加到图像时，最终的结果应该如下所示：（在Photoshop中所示）

我试着用CSS3属性弹box-shadow ，但它并没有提供真正的3D效果，因为你可以在下面的图片中看到：（我知道我可以设置模糊为0，换边，但你可以看到-有什么我试图实现对之间的拐角处的不同box-shadow结果）

没有找到一个唯一的CSS的解决方案后 - 我已经创建了下面的图像并将其设置为图像本身的背景。

的jsfiddle *请注意-我使用的是引导框架。

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:

您需要使用百分比填充因此当调整窗口它addapts到图像/容器的大小。

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;  
}

文章来源: 3D effect with image as a background of another image