Question

我的标签有25px填充和左边15px边框。我正在使用箭头背景图片。是否可以在边框上方显示此背景图片？

这是HTML

<a id="arrow">List</a>

CSS

a#arrow { 
    background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
    padding-left:25px;
    border-left:15px solid #f1f1f1;
}

这是jsfiddle link

Answer 1

您可以将您的背景设置为：after元素作为方法

<强> CSS

#arrow:after {
    content:'';/*enable after element*/
    position: absolute;
    top: px;/*position of the background*/
    left: px;/*position of the background*/
    background: url(img/your-bg.png)  no-repeat;
    width: px;/*width of the background*/
    height: px;/*height of the background*/
}

并且不要忘记添加位置：相对于#arrow

Answer 2

您可以使用背景位置查看图像。这是fiddle

你的CSS应该是

a#arrow{ background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
padding-left:25px;
border-left:15px solid #f1f1f1;
background-position: -36px;
}

Answer 3

使用带有像素值的background-position属性将其显示在顶部。

例如，

background-position: xxpx (for left-right) xxpx (for top-bottom);

PS：xx是一个虚拟值，可以用实际数字代替。

如何在边框上方显示背景图片？

3 个答案: