css - CSS マスク画像の問題

Question

縞模様の画像でテキストをマスクしようとしています。要素を検査すると、マスク画像が表示されますが、機能しません。以下のリンク。

http://piersrueb.com/colors/

Trent Walton のサイトからコードを取得しました。奇妙なことに、Trent のサイトから画像パスをコピーして css に配置すると、機能します。

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

どこが間違っているのか教えていただければ幸いです。

Answer 1

それはあなたのPNGと関係があります。理由はよくわかりませんが、すぐにhttp://piersrueb.com/colors/img/stripes.pngをTrentのhttp://trentwalton.com/wp-content/uploads/2011/05/maskに交換しました。 ChromeのWebインスペクターを使用して.pngを実行すると、動作を開始しました。

なぜこれが起こっているのか、おそらく奇妙な画像メタが起こっているのかわかりませんでしたか？しかし、それがあなたがそれを理解するのに役立つことを願っています。:)

Answer 2

マスク画像はモノクロである必要があります。それらの内部の色は効果がありません。

Answer 3

私はあなたがこれを見ていることを願っています:-

http://jsfiddle.net/rD6wq/18/

css3 プロパティ-webkit-text-fill-color: transparent;を使用できます。透過テキスト用 &
-webkit-background-clip: text; テキストクリップ内の背景画像を呼び出すために....

ただし、これらのプロパティは web-kit ブラウザーのみをサポートしています.....

HTML

<p>R</p>

<p>T</p>

<p>SUPER</p>

CSS

p{
    font-size:5em;
    font-family:impact;
    background: url(http://farm8.staticflickr.com/7245/7086291447_06484c1d6a_z.jpg) fixed; 
position:relative;
            -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;        
    display:inline-block;
    text-align:center;
    padding:10px;
}
p:after{
    content:'';
    position:absolute;
    background:rgba(0,0,0,0.5);
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:-1;
}
body{
    background: url(http://farm8.staticflickr.com/7245/7086291447_06484c1d6a_z.jpg)  fixed;
}

</p>