在背景圖像上繪製一條線，並在背景圖片上

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;