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;
}

Answer 2

你可以这样做：

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

以逗号分隔的网址。

see this url for different browser compatiblity before you use multiple backgrounds

根据您的更新

如果你使用:after pseudo元素，你还应该定义你有这样的图像的宽度和高度：

#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;
    width: 20px;
    height: 20px;
}

一个标签内的两个背景

2 个答案: