Question

我需要创建一个带有一些标记的文本，这些标记需要看起来有点自定义（使用图像）
我使用了background-property和padding，如下所示：

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

按计划工作，但backgroundimage模糊了前一个文本行。添加z-index也无效。看小提琴： 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

Answer 2

您可以使用css声明background-clip: content-box。

此外，padding和z-index可能毫无用处。请参阅下文。

body{
  background-color:#666666;
  color:white;
}


mark{
  /*z-index:-10;*/
  /*padding:10px;*/
  background:url('http://www.fillmurray.com/200/300');	
  background-repeat: no-repeat;
  background-clip: content-box;
}

<p>
“Higher up now we mark the gony, or gray albatross, anomalously so called, an unsightly, <mark>unpoetic bird, unlike its storied kinsman, which is the snow-white ghost</mark> of the haunted Capes of Hope and Horn.”

Excerpt From: Melville, Herman. “Billy Budd and Other Stories.” iBooks. 
</p>

如何防止<mark>背景重叠其他文字

2 个答案: