html - 一个标签内有两个背景

Question

我怎样才能在<h3> tag里面给两边背景

<h3>heading goes here</h3>

如下:

+---+--------------------------+------+
|>>>+ heading goes here        |<<<   +
+---+--------------------------+------+

像这样？

h3{
background: url('path') no-repeat left center;
background: url('path') no-repeat right center;
}

更新

---

好的，我是这样用的:

#custom-module .moduletable:nth-child(2) h3 {
    background: url(../images/icon-news.jpg)no-repeat center left;
    position: relative;
}
#custom-module .moduletable:nth-child(2) h3:after{
    background: url("../images/icon-news.jpg") no-repeat right center;
    content: " ";
    position: absolute;
    right: 0;
}

但在 :after 中使用了相同的背景图像伪没有显示。

Answer 1

有两种方法可以使用 CSS 实现多背景。

您可以使用 :before 和 :after 伪元素 ( tutorial with code )。

h3 {
  position: relative;
}
h3:before {
   content: "";
   position: absolute;
   top: 0; left: 10px;
   background: #4aa929;
}
h3:after {
   content: "";
   position: absolute;
   top: 0; right: 10px;
   background: #fff;
}

或者您可以使用 CSS3 的多背景功能 ( tutorial with code )。

h3 {
    background: url('path') no-repeat left center, 
                url('path') no-repeat right center;
}