图像上的边界图像

Question

我想在图像上具有边框图像。边界形象不是笔直的，因此叠加层应位于图像上，而不是后面。我尝试了z-index，但行不通。边界不躺在我的图像上。

这是小提琴。

我已经尝试了此代码：

.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;
}