CSS h1标签前后的css背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17322161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css background image before and after h1 tag
提问by renathy
I have to style all h1 tags to have an image before and after h1 text.
我必须设置所有 h1 标签的样式，以便在 h1 文本前后都有一个图像。
I know how to add image before, but do not know how to add both.
我之前知道如何添加图像，但不知道如何添加两者。
CSS (styling h1 to have image before text)
CSS（样式 h1 在文本之前有图像）
h1 {
background-image: url('images/h_ltr.png');
background-position: left center;
background-repeat: no-repeat;
text-align: center;
font-size: 22px;
font-weight: bold;
color: #5d5d5d;
}
回答by Novocaine
You can use the :beforeand :aftercss selectors.
您可以使用:before和:aftercss 选择器。
h1:before {
background-color: green;
padding: 0 20px;
content: " ";
}
h1:after {
background-color: red;
padding: 0 20px;
content: " ";
}<h1>Test</h1>回答by ban-geoengineering
You can also use multiple background images. In this example, I set background images for the left, centre and right bg images:
您还可以使用多个背景图像。在这个例子中，我为左、中和右 bg 图像设置了背景图像：
h1, h2, h3, h4, h5, h6 {
background-image: url("images/heading-bg-left.png"), url("images/heading-bg-right.png"), url("images/heading-bg-center.png"); /* set each bg image */
background-position: left center, center center, right center; /* set position of each bg image */
background-repeat: no-repeat, no-repeat, repeat-x; /* set repeat of each bg image */
padding: 0 92px; /* 92px is the width of my left and right bg images */
height: 120px; /* 120px is the height of each bg image */
line-height: 120px; /* ditto */
}
The code is fairly self-explanatory, but basically I have used three background-images with three background-positions and three background-repeats.
代码是相当不言自明的，但基本上我使用了三个background-images 和三个background-positions 和三个background-repeats。
Note that the image are rendered in reverse order. So, in my example, the left and right images will be drawn on top of the centre image.
请注意，图像以相反的顺序呈现。因此，在我的示例中，左右图像将绘制在中心图像的顶部。
回答by SebastianB
<style>
.container{
width:900px;
margin:0 auto;
position:relative;
overflow:hidden;
text-align:center;
}
h1{
font-size:20px;
display:inline-block;
position:relative;
padding:0 40px;
}
h1:after{
height:1px;
position:absolute;
content:"";
background:green;
top:10px;
width:500%;
right:-500%;
}
h1:before{
height:1px;
position:absolute;
content:"";
background:red;
top:10px;
width:500%;
left:-500%;
}
</style>
<div class="container">
<h1>1</h1>
</div>
