我正在尝试为我的标题实现以下效果: http://imgur.com/ozgAU
所以背景是红色的,然后右手边的图像附有圆边和透明背景。
目前,红色背景填充了整个区域,以至于右边的圆形图像没有透明背景, Angular 落是红色的。
这是我目前拥有的 CSS:
.tabbed-heading{
background-color: #ef4857;
padding: 8px 0px 8px 10px;
background-image: url('images/headertabright.png');
background-position: right;
background-repeat: no-repeat;
color: #fff;
max-width: 60%;
}
-
<h4 class="tabbed-heading">Lineup</h4>
任何帮助将不胜感激,谢谢。
最佳答案
不确定这是否适合您,因为您的标题看起来居中,但这是使用透明 png 的解决方法
HTML
<h4 class="tabbed-heading"><span>Lineup</span></h4>
CSS
h4 {padding:0 0 0 15px; margin-right:15px; background-color:#ef4857}
h4 span {display:block; margin-right:-15px; background:url(http://i.imgur.com/ozgAU.png) right center no-repeat; padding:7px 0;}
如果你想隐藏你的文字并且只使用图像作为标题添加 text-indent:-9999px
工作示例:
关于html - 将图像附加到标题标签之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14234804/