用图像作为其它图像的背景3D效果 [英] 3D effect with image as a background of another image

问题描述

我想了3D效果添加到图像，最后的结果应该是 如下所示：（在Photoshop中所示）

I'm trying to add a 3D effect to an image, the final result should look like the following: (illustrated in Photoshop)

我试着用CSS3属性玩的box-shadow 但它并没有提供真正的3D效果，你可以在下面的图片看到： （我知道我可以设置模糊为0，换边，但你可以看到 - 有在角一个区别就是我想要达到的箱形阴影的结果）

I've tried playing with the css3 property box-shadow but it doesn't provide a real 3D effect, as you can see in the following image: (I know I can set blur to 0 and change sides, but as you can see - there's a difference in the corners between what I'm trying to achieve to the box-shadow result)

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

After not finding a only-CSS solution - I've created the following image and set it as a background of the image itself.

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

JSFIDDLE * Please notice - I'm using the bootstrap framework.

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） 在创建图像和框架之间的距离。

Which gives the result I was looking for - but, if you re-size the window (try enlarging the result's window in the jsfiddle) a distance between the image and the frame is being created.

我应该尝试另一种战术还是我失去的东西在这里？

Should I try another tactic or am I missing here something?

推荐答案

您需要使用％的填充，因此addapts当窗口大小的图像/容器的大小。

You need to use percent padding so it addapts to the size of the image/container when window is resized.

演示

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效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！