テキストにCSSグラデーションを適用する方法、透明から不透明な色へ

私はCSS/HTMLの初心者ですが、下の画像のようなテキストにグラデーションを適用したいと思います。どのように私はそれをCSSで実装できますか？

enter image description here

2013-01-24 xamenrax

何を試しましたか？そして、あなたは影ではなく[不透明]（https://developer.mozilla.org/en-US/docs/CSS/opacity）に言及していると思います。 – Vucko

この例を試してみてください。http://jsbin.com/iwepas/3/（Firefoxの18でテスト）

関連するCSSは、私が

article { 
    position: relative; 
} 

article:after { 
    position: absolute; 
    bottom: 0; 
    height: 100%; 
    width: 100%; 
    content: ""; 
    background: linear-gradient(to top, 
    rgba(255,255,255, 1) 20%, 
    rgba(255,255,255, 0) 80% 
); 
    pointer-events: none; /* so the text is still selectable */ 
}

出力を使用<article>ラッパーのpseudoelement :afterにあります

output

ご注意：古いブラウザ上で、あなたは他のブラウザがlinear-gradient

出典

2013-01-24 11:37:40 fcalderan

テキストは選択できません。記事のために受け入れられない。 – bravedick

'pointer-events'プロパティは@TarasNeporozhniyというテキストを選択させます。あなたはFxでjsbinの例題を試しましたか？ – fcalderan

あなたはそれを底から高さに固定する必要があります。テキストの80％が選択可能なままになります。 – bravedick

ため、ベンダープレフィックスを必要としながら、より透明ツー不透明PNGの背景がpseudoelementに適用される使用する必要があるかもしれません

CSS3のテキストグラデーションは、ChromeやSafariなどのWebkitベースのブラウザでのみサポートされています。私は3つの方法を使いました。チェックこのフィドル最初http://jsfiddle.net/sarfarazdesigner/pvU7r/ が、これはクロムで正常に動作しているこの

.article{ 
    background: -webkit-linear-gradient(#eee, #333); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

を試してみてどのように反応するか、他のブラウザを知りません。参考資料はhttp://css-tricks.com/snippets/css/gradient-text/

出典

2013-01-24 12:09:04

はFirefoxで動作しません – Vadim

テキストにCSSグラデーションを適用する方法、透明から不透明な色へ

答えて

関連する問題