2

マスクの適用に関するいくつかのチュートリアルに従おうとしていますが、h1 に何かを適用すると、すべてのテキストが完全に消えます。画像マスクとグラデーションを使用してみましたが、同じことが起こります。

<h1 id="site-name">
    <a href="/" title="Home"><span>The Biospheric Project</span></a>
</h1>

グラデーションを使ったCSS

h1 { 
    -webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,1)),
    to(rgba(0,0,0,.2)));
    text-shadow: 0px 0px 30px rgba(30, 28, 28, 0.6);
}
4

2 に答える 2

1

あなたのソリューションはそのまま機能するようです。

h1 { 
    -webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,1)),
    to(rgba(0,0,0,.2)));
    text-shadow: 0px 0px 30px rgba(30, 28, 28, 0.6);
}

このフィドルを参照してください：

http://jsfiddle.net/2crma/

もちろん、Webkit ブラウザーでのみ動作します。

于 2013-02-18T12:55:46.323 に答える