图像上的边框图像

Question

我想在图像上添加边框图像。边框图像不是直的，因此叠加层应该位于图像上方而不是后面。我用 z-index 试过了，但没用。边框不在我的图像上方。

这里是the fiddle。

我已经用这个代码试过了：

.sprocket-mosaic-image-container {
    position: absolute;
    border-style:solid;
    border-width: 60px 28px 87px 24px;
    -moz-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
    -webkit-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
    -o-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
    border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
    z-index:1;
}

.sprocket-mosaic .sprocket-mosaic-image {
    position:relative;
     z-index:0;
}

Answer 1

您可以通过以下方式实现：

使用图片作为背景

.sprocket-mosaic-image-container {
    position: absolute;
    
     /** define width and height of the image **/
    width: 375px;
    height: 281px;
    
    /** set the box sizing so the border dimensions would be part of the width and height **/
    box-sizing: border-box; 
    
    border-style:solid;
    border-width: 60px 28px 87px 24px;
    -moz-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
    -webkit-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
    -o-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
    border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
    
    /** set the image as background **/
    background: url(http://i.imgur.com/rdZ1sYQ.jpg) no-repeat;
    
    /** define the origin so the image would be under the border **/
    background-origin: border-box;
    
    z-index:1;
}

.sprocket-mosaic .sprocket-mosaic-image {
    position:relative;
     z-index:0;
}

<div class="sprocket-mosaic-image-container"></div>

绝对定位的伪元素上的边框

如果你必须有一个图像标签（例如未知的宽度和高度），你可以在容器上一个绝对定位的伪元素上定义边框。

.sprocket-mosaic-image-container {
  position: absolute;
  z-index: 1;
}

.sprocket-mosaic-image-container::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-style: solid;
  border-width: 60px 28px 87px 24px;
  -moz-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
  -webkit-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
  -o-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
  border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
  content: '';
}

.sprocket-mosaic .sprocket-mosaic-image {
  position: relative;
  z-index: 0;
}

<div class="sprocket-mosaic-image-container">
  <img src="http://i.imgur.com/rdZ1sYQ.jpg" alt="Simple Item 2" class="sprocket-mosaic-image">
</div>

Answer 2

在我看来，边框图像对于这种情况不是一个好主意。 您可以使用更多元素来构建它。 试试这个： https://jsfiddle.net/cz1k6bcn/

<div class="sprocket-mosaic-image-container">
        <span class="top-border custom-borders"></span>
        <span class="bottom-border custom-borders"></span>
        <span class="left-border custom-borders"></span>
        <span class="right-border custom-borders"></span>
                                <img src="http://wildstar-mmo.de/images/sampledata/fruitshop/apple.jpg" alt="Simple Item 2" class="sprocket-mosaic-image">
                            </div>



.sprocket-mosaic-image-container {
  position:relative;
    margin-bottom: 15px;
    display: inline-block;

}
.custom-borders {
    url(http: //www.wildstar-mmo.de/images/border-news.png);
    background: url(http://www.wildstar-mmo.de/images/border-news.png);
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
}

.top-border.custom-borders {
    height: 35px;
    width: 100%;
}

.bottom-border.custom-borders {
    background: url(border-news.png);
    height: 82px;
    bottom: 0;
    top: auto;
    width: 100%;
    background: url(http://www.wildstar-mmo.de/images/border-news.png);
    background-position-y: -482px;
    background-size: cover;
    z-index: 444;
}

.left-border.custom-borders {
    height: 100%;
    width: 12px;
}

.right-border.custom-borders {
    right: 0;
    height: 100%;
    width: 13px;
    left: auto;
}

.sprocket-mosaic .sprocket-mosaic-image {
    border-radius: 3px;
    position:relative;
}