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

您是否考虑过使用border-top？参见：

#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;

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

3 个答案: