H1的背景圖片

在我的WordPress主題頁面標題<?php the_title(); ?>。H1的背景圖片

我的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我的頁面標題文本跨度寬度一直未修復。每個頁面都有不同的頁面標題。

所以我想要使用兩個圖像部分：一個長方形背後的文本使用repeat-x和：第二個箭頭（三角形）在文本字符串結束後。

這樣我就可以得到任何頁面標題文本的箭頭圖像。建議我如何得到這個？

來源

2013-03-31 galexy

也許你有使用'：after'看看有：http://css-tricks.com/snippets/css/ribbon/ @ ChoiZ – ChoiZ

感謝您的幫助鏈接，我也要通過這個主題http://www.sitepoint.com/forums/showthread.php?767250-How-to-start-a-background-image-after-the-text-ends – galexy

所以在你的粘貼代碼中，我們可以't看到：之後;） – ChoiZ

我用這種方法有很多：

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/

來源

2013-03-31 15:10:06 xpy

謝謝@ xpy：這真的很有幫助，這就是我想要的，試試吧。 – galexy

它的工作！現在我可以使用Image-sprite實現我想要的任何其他功能區圖像。 – galexy

回答

相關問題