0

我怎样才能在里面给背景两边<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但未显示伪中使用的相同背景图像。

4

2 回答 2

5

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

您可以使用:before 和 :after 伪元素（教程和代码）。

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 的多背景功能（代码教程）。

h3 {
    background: url('path') no-repeat left center, 
                url('path') no-repeat right center;
}
于 2013-09-08T06:14:06.707 回答
1

你可以这样做：

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

网址以逗号分隔。

在使用多个背景之前，请查看此 url 以了解不同的浏览器兼容性

根据您的更新

如果您使用: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;
}
于 2013-09-08T06:16:26.230 回答