Html H1 标题的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15730533/
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
Background image for H1 heading
提问by galexy
In my wordpress theme page heading <?php the_title(); ?>.
在我的 wordpress 主题页面标题中<?php the_title(); ?>。
My Css:
我的CSS：
#page h1.pagetitle {
width:auto;
text-align:left;
font-size:30px;
padding:25px 40px 25px 0px;
text-transform:uppercase;
}
#page h1.pagetitle span{
background:#202020;
padding:5px 40px 5px 10px;
}
Html:
网址：
<h1 class="pagetitle"><span><?php the_title(); ?></span></h1>
I want background image like arrow ribbon like this sample http://www.123rf.com/photo_12816420_green-arrow-ribbon-on-wooden-desk.html
我想要像这个示例的箭头丝带背景图像http://www.123rf.com/photo_12816420_green-arrow-ribbon-on-wooden-desk.html
I can place background Image directly or using background image with repeat-x.But My page title text span width is not fix at all the time. Each page is with different page title .
我可以直接放置背景图像或使用带有重复 x 的背景图像。但我的页面标题文本跨度宽度始终不固定。每个页面都有不同的页面标题。
So I want to use two Image portion :one with rectangular behind text using repeat-x and :second with arrow (triangular) just after end of text string.
所以我想使用两个图像部分：一个在文本后面带有矩形，使用 repeat-x 和：第二个在文本字符串结尾后带有箭头（三角形）。
this way I can get the arrow image for any page title text. Suggest me how can I get this?
这样我就可以获得任何页面标题文本的箭头图像。建议我如何得到这个？
回答by xpy
I use this technique a lot:
我经常使用这种技术：
h1{
background: url('http://i49.tinypic.com/2zs1z79.png') 0 0 repeat-x;
position:relative;
display: inline-block;
margin:0 25px;
padding:0 10px;
height:40px;
}
h1:before,h1:after {
content:'';
display: inline-block;
position:absolute;
top: 0;
right: -20px;
width: 20px;
height: 100%;
background:inherit;
background-position:100% 100%;
}
h1:before {
left:-20px;
background-position: 0 100%;
}
I use :beforeand :afterfor the head and the tail and a sprite for the image. It is nice, clean and flexible (enough).
我使用:beforeand:after作为头部和尾部，并使用一个精灵作为图像。它很好，干净且灵活（足够）。
