2

在我的 wordpress 主题页面标题<?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

我可以直接放置背景图像或使用带有repeat-x的背景图像。但是我的页面标题文本跨度宽度始终不固定。每个页面都有不同的页面标题。

所以我想使用两个图像部分：一个使用repeat-x在文本后面带有矩形，在文本字符串结束后使用：第二个带有箭头（三角形）。

这样我可以获得任何页面标题文本的箭头图像。建议我怎样才能得到这个？

4

1 回答 1

5

我经常使用这种技术：

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

我使用:beforeand:after作为头部和尾部，使用 sprite 作为图像。它很好，干净且灵活（足够）。

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

于 2013-03-31T15:10:06.197 回答