Question

我的目标是在文本中添加白色背景，在右侧添加点缀背景，而不再添加任何标记。

<div class='widget'>
<h2 class="title">
  title here
</h2>
</div>

widget { 
  width: 400px;height:400px;
  margin: 120px auto;border:1px solid #f00;
}
h2.title {
  margin:5px;padding:0 5px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);
color: #f00;
}

My fiddle here

我尝试使用伪类之前/之后，显示内联，浮点数但仍无法使其工作。

Answer 1

也许这不是最好的解决方案，但你可以尝试这样的事情：

h2.title:first-line{
    background: #fff;
}

demo

Answer 2

将此样式添加到您的css

background-position:right;
background-size: 30px 20px;
background-repeat:no-repeat;

你可以改变背景的大小。

所以它将是

    .widget { 
  width: 400px;height:400px;
  margin:20px auto;border:1px solid #f00;
}
h2.title {
margin:5px;padding:0 5px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);
color: #f00;
    background-position:right;
    background-size: 30px 20px;
    background-repeat:no-repeat;
}

Answer 3

您可以使用类似的方法为背景添加偏移量 background-position：100px top;

问题在于＆＃34;背景重复＆＃34;财产应设置为“不要重复”＃34;。

如何在标题标签上添加点缀背景？

3 个答案: