对于H1标题背景图片(Background image for H1 heading)

在我的wordpress主题的页面标题<?php the_title(); ?> <?php the_title(); ?> 。

我的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> 

我要像箭头的带状这个样本的背景图像http://www.123rf.com/photo_12816420_green-arrow-ribbon-on-wooden-desk.html

我可以直接或使用背景图片重复x.But我的页面标题文本跨度在所有的时间不固定放置背景图片。 每一页是用不同的页面标题。

所以，我要使用两个图像部分：只是文本串的结束之后的第二箭头（三角形）：使用重复-x和一个与后面的文字的矩形。

这样我可以得到任何页面标题文本的箭头图像。 推荐我怎样才能得到呢？

Answer 1:

我用这种方法有很多：

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

我用:before和:after的头部和尾部，为图像的精灵。 这是很好的，干净的，灵活的（足够的）。

演示： http://jsfiddle.net/pavloschris/5Qvn7/

文章来源: Background image for H1 heading