1

私は自分の見出しに対して次の効果を達成しようとしています：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>

どんな助けでも大歓迎です、ありがとう。

4

1 に答える 1

2

見出しが中央に配置されているように見えるため、これが機能するかどうかはわかりませんが、これは透明な 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/

于 2013-01-09T12:24:59.963 に答える