html - 将背景图像和自定义元素符号应用于 css 标题

Question

所以我的<h1>的前面应该有单独的自定义图案背景和单独的图像元素符号。问题是，我不能将两个样式元素都应用为背景图像(我听说您可以使用 CSS3 设置多个背景图像？但我现在想尝试一种更跨浏览器兼容的方式。)

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> 周围添加另一个 div的并在其上应用图案，并将元素符号直接应用在 <h1> 上.有没有其他更聪明的方法来达到我想要的效果？

谢谢!

Answer 1

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

你也可以这样做

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