2

我的div页面上有一个使用该background-image属性指定的背景图像。我希望能够使用 HTML/CSS 在背景图像的顶部画一条线（即不使用通过图像绘制的线创建单独的图像）。这可能吗？

CSS

#myDiv {
    background-image: url('myimage.png');
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
}

HTML

<div id="myDiv"></div>

编辑

抱歉，“在顶部”是指在 z 索引的顶部，而不是在图像的顶部边缘。我很抱歉不清楚。我要做的是在图像上画一条红色斜线。

4

3 回答 3

3

如果不想添加另一个 HTML 元素，可以使用::before/::after伪元素：

#myDiv {
    background-image: url('myimage.png');
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    position: relative;
}

/* this should draw a red line through the center of the image */
#myDiv:after {
    border-top: 1px solid red;
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
}

现场演示：http: //jsfiddle.net/vHuHs/

于 2013-07-04T16:29:39.490 回答
0

您是否考虑过使用边框顶部？看：

#myDiv {
    background-image: url('myimage.png');
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    border-top: 10px solid red;
}

也可以在 jsFiddle 上找到。

于 2013-07-04T15:01:19.547 回答
0

像这样（将其添加到您的样式中）：

border-top: 20px solid red;
于 2013-07-04T15:02:42.437 回答