我怎样才能在<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
中使用了相同的背景图像伪没有显示。
最佳答案
有两种方法可以使用 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;
}
关于html - 一个标签内有两个背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18680985/