html - 如何防止 <mark> 背景与其他文本重叠

Question

我需要创建一个带有一些标记的文本，这些标记需要看起来有点自定义(使用图像)
我像这样使用背景属性和填充:

mark{
    padding:10px;
    background:url(http://www.fillmurray.com/200/300);  
    background-repeat: no-repeat;
}

按计划工作，但背景图像遮挡了之前的文本行。 添加 z-index 也没有用。 看 fiddle : fiddlelyfidd

关于如何将它发送到后面有什么想法吗？

谢谢

Answer 1

尝试添加 background-position: 0px 10px; 它工作正常

   mark{
        z-index:-10;
        padding:10px;
        background:url(http://www.fillmurray.com/200/300);  
        background-repeat: no-repeat;
       background-position: 0px 10px;

    }

check this updated jsfiddle