在背景图像上绘制一条线，并在背景图片上

Question

我在我的页面上有一个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指数方面顶部，不在图像的顶部边缘。我不明确的道歉。我想要做的是在图像中画一条红色的斜线。

Answer 1

如果你不希望添加其他的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/

Answer 2

你有没有考虑过使用边框？请参阅：

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

Also available on jsFiddle.

Answer 3

像这样（把它添加到你的风格）：

border-top: 20px solid red;