html - 将背景图像和自定义项目符号应用于 CSS 标题

Question

所以我<h1>的 's 应该在它们前面有单独的自定义图案背景和单独的图像项目符号。问题是，我不能将两个样式元素都应用为背景图像（我听说你可以使用 CSS3 制作多个 bg 图像？但我现在想尝试一种更跨浏览器兼容的方式。）

html:

<div id="content">
<h1>Heading</h1>
<p>Paragraph</p>
</div>

CSS：

#content > h1 {
background: url("heading-bg.png") repeat; 
padding: 25px 0 25px 80px;
}

现在我尝试做这样的事情来<h1>在 css 中获取项目符号图像：

#content > h1:before {background: url("bullet1.png") no-repeat left;}

我可以在我<h1>的 's 周围添加另一个 div 并在其上应用模式，并将项目符号直接应用在<h1>. 还有另一种更聪明的方法来达到我想要的效果吗？

谢谢！

score 2 · Accepted Answer

是的，除非内容存在，否则之前和之后将不起作用，

你也可以这样做

#content h1:before{
  content:"";
  width:50px;
  height:50px;
  background:url('images/bullet.png');
}

1 回答 1