5

この効果を HTML で作成する必要があります。「Colhemos ideias, semeamos futuro...」

これは可能ですか？

ここに画像の説明を入力

基本的に、これは不透明度 0.7 の白いボックスで、その後ろに背景画像があります。テキストは白いボックスに入れる必要がありますが、文字はマスクとして機能し、背景画像が透けて見えるようにする必要があります。

4

2 に答える 2

5

これは（理論的には）イメージマスクで可能ですが、現時点ではまだ公式標準の一部ではありません。現時点では、マスクはWebkitエンジンでのみ使用できます。

サポート：http ：//caniuse.com/#search=mask

例：http ：//trentwalton.com/2011/05/19/mask-image-text/

それ以外は、頭のてっぺんから、純粋なCSS+HTML5では不可能だと思います。

あなたの例に関して...私はそれがただの透明だと思います.png。

于 2012-04-27T11:36:12.960 に答える
3

ホワイトボックスコンテナとまったく同じ幅の透明なPNGを使用します。

http://jsfiddle.net/lollero/mAQe4/

また、テキスト画像とそのコンテナーの間の透明度の違いを避けるために、白いボックスの背景に透明な PNG 画像を繰り返し使用することを選択しました。

opacity: o.8または、 in#contentとを使用できます。#footer

HTML:

<div id="content-wrap">
    <div id="content">
      Lorem ipsum dolor sit amet.
    </div>

    <img id="the-image" src="http://img220.imageshack.us/img220/4051/62739191.png" alt="" />

    <div id="footer">
      Lorem ipsum dolor sit amet.
    </div>
</div>​

CSS:

html {
    background: url('http://placekitten.com/850/850') repeat top left;
}


#content-wrap {
    width: 200px;
    margin: 0px auto;
}

#content,
#footer {
    background: url('http://img267.imageshack.us/img267/2733/21138012.png')repeat top left;
}

#the-image { width: 100%; display: block; }

他の方法に対するこの方法の大きな利点は、幅広いブラウザー互換性が保証されることです。現在の最新バージョンの Firefox、Safari、Chrome、および IE はすべて、透明な PNG を使用する場合、これを同じ方法で処理する必要があります。また、IE の互換性が優先される場合は、IE6 までさかのぼってこれを機能させる方法があります。

于 2012-04-27T13:04:17.780 に答える