html - 前景中的图像边框

Question

我正在尝试在图像周围放置图像边框。我想要前景中的框架和背景中的图片。

框架是透明的 PNG。在这个例子中，我想让猫走到框架后面。我怎样才能做到这一点？

这是我的代码:

.frame{
border-style: solid;
border-width: 63px 84px 93px 98px;
-moz-border-image: url(http://dc346.4shared.com/img/kDajfqf9/s7/128d011efa0/black_frame) 63 84 93 98 stretch;
-webkit-border-image: url(http://dc346.4shared.com/img/kDajfqf9/s7/128d011efa0/black_frame) 63 84 93 98 stretch;
-o-border-image: url(http://dc346.4shared.com/img/kDajfqf9/s7/128d011efa0/black_frame) 63 84 93 98 stretch;
border-image: url(http://dc346.4shared.com/img/kDajfqf9/s7/128d011efa0/black_frame) 63 84 93 98 fill stretch;
}

<img class="frame" src="http://fc09.deviantart.net/fs71/f/2011/100/f/2/cat_png_by_dbszabo1-d3dn2c8.png"

http://jsfiddle.net/pnb1/hc8z3phr/

感谢任何帮助

Answer 1

简单地将图像包裹在 <div> 中，将框架应用到那个 div，然后，使用相对定位和 z 索引，放下 child <img>在 parent 身后<div> .

HTML:

<div class="frame">
    <img src="http://fc09.deviantart.net/fs71/f/2011/100/f/2/cat_png_by_dbszabo1-d3dn2c8.png"/>
</div>

CSS:

.frame {
    display: inline-block;
    width: auto;
    border-style: solid;
    border-width: 63px 84px 93px 98px;
    -moz-border-image: url(http://dc346.4shared.com/img/kDajfqf9/s7/128d011efa0/black_frame) 63 84 93 98 stretch;
    -webkit-border-image: url(http://dc346.4shared.com/img/kDajfqf9/s7/128d011efa0/black_frame) 63 84 93 98 stretch;
    -o-border-image: url(http://dc346.4shared.com/img/kDajfqf9/s7/128d011efa0/black_frame) 63 84 93 98 stretch;
    border-image: url(http://dc346.4shared.com/img/kDajfqf9/s7/128d011efa0/black_frame) 63 84 93 98 fill stretch;
}
.frame img {
    position: relative;
    z-index: -1;
}

JSFiddle