次のような大きな太字にグラデーションを追加する方法を探しています。
単語には 1 行または 2 行のいずれかを含めることができ、フォントの高さはビューポートの高さによって異なります。
この例は Chrome では機能しますが、FF では機能しません: http://dabblet.com/gist/1695257
あなたが推奨する、動作する純粋な CSS ソリューションはありますか?
8740 次
3 に答える
5
Webkit 以外のブラウザーでは、純粋な css でこれを行うことはまったくできません。あなたの例はWebkitでそれを行う正しい方法ですが、Firefoxがテキストクリップなしでグラデーションを使用しようとしないことを確認するためだけに、Webkit検出メディアクエリを実行します( CSSプレフィックスが脅威になりつつありますが、Webkitは本当にのせい？） みたいな。これは仕様外のものであり、実際に使用するべきではありません。
于 2012-04-12T13:51:32.153 に答える
1
ナサニエルが上で言ったことに同意しますが、それでも試してみたい場合は、次のようにすることができます。
<style>
h1 {
font-size: 60px;
text-align: center;
margin: 40px;
color: #000;
}
h1.methodA {
background: -webkit-linear-gradient(top, #1965a9, #000);
background: linear-gradient(top, #1965a9, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1.methodB {
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.3) 50%, rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.3) 50%, rgba(0,0,0,1));
}
</style>
<h1 class="methodA">Awesome Gradient Text Method A</h1>
<h1 class="methodB">Awesome Gradient Text Method B</h1>
于 2014-03-25T18:42:59.427 に答える
-2
要点は、この機能はさまざまなブラウザーと簡単に互換性がないということですが、時間をかけてグーグルで検索したところ、次のことがわかりました 。 web-browsers-without-using-images/
それがあなたを助けることを願っています。
編集：コメントの人々は、これがテキストでは機能しないという事実に気づきました。そのため、その答えを提供するこの他の記事を見つけました： http://webdesignerwall.com/tutorials/css-gradient-text-効果
于 2012-04-12T11:32:27.333 に答える