在我的 WordPress 主题页面标题中<?php the_title(); ?>
.
My 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 http://www.123rf.com/photo_12816420_green-arrow-ribbon-on-wooden-desk.html
我可以直接放置背景图像或使用带有repeat-x的背景图像。但是我的页面标题文本跨度宽度始终不固定。每个页面都有不同的页面标题。
所以我想使用两个图像部分
:使用repeat-x在文本后面带有矩形的一个和
:第二个,在文本字符串末尾后带有箭头(三角形)。
这样我就可以获得任何页面标题文本的箭头图像。
建议我怎样才能得到这个?
我经常使用这种技术:
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 :before
and :after
头部和尾部以及图像的精灵。它很好、干净、灵活(足够了)。
demo : http://jsfiddle.net/pavloschris/5Qvn7/ http://jsfiddle.net/pavloschris/5Qvn7/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)