圖像的歸責外標題標籤

我想實現我的標題如下效果： 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>

任何幫助將不勝感激，謝謝。

來源

2013-01-09 Andrew Cassidy

可你也發表您爲HTML？ – Sharpless512

用html編輯 –

你必須使用透明png嗎？爲什麼不只是用黑色背景重新制作圖像？ – Pete

不知道這是否會爲你工作，爲您的標題看起來是中心，但這個是使用透明的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;}

如果你想隱藏你的文字，只是使用圖像作爲標題添加文本我ndent：-9999px

工作例如：

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

來源

2013-01-09 12:24:59 Pete

圖像的歸責外標題標籤

回答

相關問題