Question

为了得到这个酒吧，我使用了一个左边的边框，并获得一张图片。然而，子弹图像在栏后面。

我如何才能获得边界左上方的子弹图像？

`<div id="verticalbar">
`...<p class = "g"><img id="bullet" src="bullet.png"/><b>Somethinghere</b></p> ...</div`>

我尝试使用z-index，但它不起作用。

Answer 1

使用具有边框和绝对位置的元素的相对位置以及图像的相应位置设置。图像必须是具有边框的元素的直接子元素，以使此代码正常工作：

p.g {
  position: relative;
  border-left: 1px solidblack;
}
p.g. > img {
  position: absolute;
  left: -6px;
  top: 24px; 
}

（根据需要使用值，使用ID或类来处理不同的图像）

Answer 2

为什么不使用border-image？

border-image: url(https://i.stack.imgur.com/lWzZd.png) 30 stretch;
border-right: none; // Reset the border-right

＆＃13;

#borderimg { 
    border: 10px solid transparent;
    border-image: url(https://i.stack.imgur.com/lWzZd.png) 30 stretch;
    border-right: none;
}

＆＃13;

<p id="borderimg">text</p>

＆＃13;

Answer 3

您可以设置位置：相对于父级和项目符号，然后您可以使用左/右负位置。例如

p.g{
    border-left:1px solid #000;
    position:relative;
}
p.g img{
    position:relative;
    left:-4px;/*the exact pixels you need*/
}

如何在边框上方获取图像

3 个答案: