我想在图像上有边框图像。边框图像不是直的,因此叠加层应位于图像上而不是后面。我用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;
}
答案 0 :(得分: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>
&#13;
绝对定位的伪元素上的边框
如果你必须有一个图像标签(例如未知的宽度和高度),你可以在容器上绝对定位的伪元素上定义边框。
.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;
}
&#13;
<div class="sprocket-mosaic-image-container">
<img src="http://i.imgur.com/rdZ1sYQ.jpg" alt="Simple Item 2" class="sprocket-mosaic-image">
</div>
&#13;
答案 1 :(得分:1)
在我看来边境图像对于这种情况不是一个好主意。 你可以使用更多的元素来构建它。 试试这个: 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;
}