8

テキストに 100% の透明度を適用して、テキストの文字内にページの背景画像が表示されるようにする方法があれば教えてください。

<div>つまり、白い背景の と の背景画像があると想像してください<body>。<div>の白い背景にもかかわらず、の背景画像<body>がテキストを通して見えるように、 の中にテキストを設定したいと思います<div>。

おそらく反転フォントを使用することもできますが、より良い方法がある場合はそれを行うことをお勧めします.

4

6 に答える 6

10

動的である必要がありますか？これを行う唯一の方法は、透明度のある画像（GIF、より適切にはPNG）を使用することです。

これがあなたの望むものかどうかはわかりませんが、とにかく説明します。

状況：あなたはあなたがあなたのテキストを通して見られたいと思う非明白な背景を持っています。

解決策：これを救うCSSはありません。信頼できる画像エディタを使用して、テキストを含むレイヤーと、テキストのネガティブになる別のレイヤーを作成する必要があります。

これにより、いくつかの興味深い効果を得ることができますが、動的にしたい場合は、その場でサーバーサイドで画像を生成する必要があります。

この種のトリックは現在、純粋なCSSでは不可能です（Javascriptで可能かもしれません）。

編集

WebkitでPaulが見つけたものを見て、Firefox、Opera、IEでその動作を偽造する方法を考えました。これまでのところ、Firefoxで要素を使用して幸運に恵まれておりcanvas、でいくつかの動作を見つけようとしていますfilter:progid:DXImageTransform.Microsoft。

これまでのところcanvas、これは私がしたことです

<html>
<body>
<canvas id="c" width="150" height="150">
</canvas>
<script>
ctx = document.getElementById("c").getContext("2d");
// draw rectangle filling the canvas element
ctx.fillStyle = "red";
ctx.fillRect(0,0,150,150);

// set composite property
ctx.globalCompositeOperation = 'destination-out'; 
// the text to be added now will "crop out" the red rectangle
ctx.strokeText("Cropping the", 10, 20);  
ctx.strokeText("red rectangle", 10, 40);  

</script>
</body>
</html>

detination-out合成を使用して、にテキストを描画しますcanvas。

于 2010-02-18T14:49:38.830 に答える
6

あなたが何を求めているのか正確にはわかりませんが（100％の透明度は何かが見えないことを意味し、目に見えないテキストは一般的に良い考えではありません）が、一般的に：

  1. CSSopacityプロパティは、テキストだけでなく要素全体に適用されます。したがって、次の HTML がある場合:

    <div class="opacity-50">
    This is a div with a background colour and 50% opacity
</div>

    そしてこのCSS：

    .opacity-50 {
    background: #ccc;
    color: #000;
    opacity: 0.5;
}

    背景とテキストの両方が 50% の不透明度になります。

  2. rgba色の値を使用すると、半透明の色を指定できます。したがって、次の HTML がある場合:

    <div class="text-opacity-50">
    This is a div with semi-transparent text
</div>

    そしてこのCSS：

    .text-opacity-50 {
    background: #ccc;
    color: rgba(0,0,0,0.5);
}

    次に、そのテキストのみが 50% の不透明度になります。

rgba色の値は、よりもわずかに少ないブラウズでサポートされていると思いますopacity。

于 2010-02-18T14:21:05.353 に答える
4

ああ — 「パンチスルー」透過性について話しているのであれば、いいえ、CSS はこれを行いません。

WebKit (Safari と Chrome のレンダリング エンジン) を除いて、完全にカスタマイズされた、Dave-Hyatt によって作成された、CSS-3 でさえないプロパティ値を持つ-webkit-background-clip: text;.

Safari と Chrome 以外のブラウザはサポートしていません。

于 2010-02-19T00:49:49.803 に答える
1

InkScape と IcoMoon で時間をかけて独自のフォントを作成し、ネガノックアウト フォントを作成すると、文字が透けて見えるようになります。この手法を使用して、一部のトラフ アイコンを表示しました。

于 2013-12-04T09:34:00.200 に答える
0

背景なしの .png を使用するのが良い方法です。Photoshop では、Web 用に保存できます。

またはCSSで：

#div
{
    background:transparent;
    color:whatever;

}
于 2013-02-27T19:39:22.620 に答える
0

DIV の背景画像を完全に透明な GIF に設定してみませんか?

http://www.pageresource.com/dhtml/csstut9.htm

于 2011-07-08T10:24:52.997 に答える