将图像附加到标题标签的外部答案

【问题标题】：Affixing image to outside of heading tag将图像附加到标题标签的外部
【发布时间】：2013-01-09 20:24:59
【问题描述】：

我正在尝试为我的标题实现以下效果： http://imgur.com/ozgAU

所以背景是红色的，然后右边的图像被附上圆形边缘和透明背景。

目前，红色背景填充了整个区域，因此右侧的圆形图像没有透明背景，角落是红色的。

这是我目前拥有的 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>

任何帮助将不胜感激，谢谢。

【问题讨论】：

您也可以为此发布您的 html 吗？
你必须使用透明的png吗？为什么不直接用黑色背景重新制作图像？
实际上不，它不必是透明的。这样可以，谢谢。
考虑这个答案stackoverflow.com/a/4056440/1135581

标签： html css

【解决方案1】：

不确定这是否适合您，因为您的标题看起来居中，但这是使用透明 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

工作示例：

http://jsfiddle.net/YKrf4/1/

【讨论】：