H1标题的背景图片 [英] Background image for H1 heading
问题描述
在我的wordpress主题页标题为<?php the_title(); ?>
的地方.
In my wordpress theme page heading <?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
I want background image like arrow ribbon like this sample http://www.123rf.com/photo_12816420_green-arrow-ribbon-on-wooden-desk.html
我可以直接放置背景图像,也可以将背景图像与repeat-x一起使用.但是我的页面标题文本跨度宽度始终无法固定.每个页面具有不同的页面标题.
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 .
所以我要使用两个图像部分 :一个使用repeat-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.
这样,我可以获得任何页面标题文本的箭头图像. 建议我如何得到这个?
this way I can get the arrow image for any page title text. Suggest me how can I get this?
推荐答案
我经常使用这种技术:
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
用作头部和尾部,并将sprite用作图像.很好,干净,灵活(足够).
I use :before
and :after
for the head and the tail and a sprite for the image. It is nice, clean and flexible (enough).
演示: http://jsfiddle.net/pavloschris/5Qvn7/
这篇关于H1标题的背景图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!