Html 用背景图像在div顶部画一条线

我的页面上有一个

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索引的顶部，而不是图像的顶部边缘。我很抱歉说得不清楚。我想做的是在图像中画一条红色斜线。

您考虑过使用border top吗？见：

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

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

---

如果不想添加其他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: '';
}

---

现场演示：

为什么不使用border top？

#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: '';
}