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

Question

所以我的<h1> 前面应该有单独的自定义图案背景和单独的图像项目符号。问题是，我不能将两个样式元素都应用为背景图像（我听说你可以有几个使用 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;
}

现在我尝试做这样的事情来获取 css 中 <h1> 前面的子弹图像：

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

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

谢谢！

Answer 1

是的，除非内容存在，否则 before 和 after 将不起作用，

你也可以这样做

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