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索引将子<img>放在父<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;
}

前景中的图像边框

1 个答案:

HTML：

CSS：

JSFiddle