图像上的边框图像 [英] border-image over an image

问题描述

我想在图像上有边框图像.边框图像不是笔直的，因此叠加层应位于图像上方，而不应位于图像之后.我尝试使用z-index进行此操作，但是不起作用.边框不在我的图像上.

I want to have a border image over an image. The border-image isn´t straight so the overlays should lie over the image and not behind. I tried this with z-index, but doesn´t work. The border doesn´t lie over my image.

这是小提琴.

我已经用以下代码尝试过它:

I have tried it with this this code:

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

推荐答案

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

You can achieve that by:

使用图片作为背景

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

边界在绝对定位的伪元素上

如果必须具有图像标签(例如，宽度和高度未知)，则可以在容器上绝对定位的伪元素上定义边框.

If you must have an image tag (unknown width and height for example), you can define the borders on an absolutely positioned pseudo element on the container.

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

这篇关于图像上的边框图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！