Question

我正试图为我的标题达到以下效果： 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>

非常感谢任何帮助，谢谢。

Answer 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;}

如果你想隐藏你的文字，只需使用图像作为标题添加文字缩进：-9999px

工作示例：

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

将图像粘贴到标题标记的外部

1 个答案: