与图象的3D作用作为另一个图象的背景 [英] 3D effect with image as a background of another image
问题描述
我想为图片添加3D效果,最终结果应该是
,如下所示:(在Photoshop中说明)
< img src =https://i.stack.imgur.com/Z6ivo.pngalt =我要找的结果>
尝试使用css3属性 box-shadow
,但它不提供真正的3D效果,如下图所示:
(我知道我可以将模糊设置为0并改变两侧,但是你可以看到 - 角落在我想实现的 shadow
result)
找不到一个只有CSS的解决方案后,我创建了下面的图片,并将其设置为图片本身的背景。 p>
code> .framed {
background-image:url('http://www.6pix.co/images/shadow-3.png');
padding-left:2.9%;
padding-bottom:2.9%;
background-size:cover;
}
I'm trying to add a 3D effect to an image, the final result should look like the following: (illustrated in Photoshop)
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)
After not finding a only-CSS solution - I've created the following image and set it as a background of the image itself.
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;
}
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?
You need to use percent padding so it addapts to the size of the image/container when window is resized.
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屋!