2011-08-31 18 views
6

は、私は次のコードを持って言う:フォント色の背景画像を設定しますか?

<span>Hello world!</span> 

そして、次のCSS:

span{ 
color:red; 
} 

私がイメージにredを変更することができます任意の方法はありますか? url(images/text-bg.png);のように?私は自分のテキストにテクスチャをつけたいだけで、テキスト "カラー"をイメージにすることに決めましたが、CSSでこれを行うことができるかどうかはわかりません。

+1

私はこの使用して不透明度を行う方法があるかどう考えるようにしようとしています。私はそこにいるとは思わない。 https://developer.mozilla.org/ja/CSS_Referenceテキストとフォントスタイルを見て、イメージを使わずに探しているエフェクトを試してみましょう。 – Dave

+1

あなたはSVGのビットでそれを生成することができるかもしれません... – zzzzBov

+0

可能な複製[CSSでテキストの色のためのイメージを使用することは可能ですか?](http://stackoverflow.com/questions/5812236/with- css-is-it-possible-to-use-to-text-color-color) –

答えて

5

はい、それはSVGを使用可能です、あなたは別の上<svg><div> 1オーバーと背景画像を埋め込むことができます<div>、後でZインデックスを<div>に適用します。イラストレーターのようなベクターアプリケーションを使用して、必要な方法でSVGを作成することができます。


<html> 
<head> 
<title>Untitled Document</title> 
<style> 
html 
{ 
    background-image:url('lauch.jpg'); 
    background-repeat:no-repeat; 
    background-position:center; 
    padding-top:200px; 
} 
</style> 
</head> 
<body> 

<div align="center"> 
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="140px" height="80px" viewBox="0 0 76.25 39.167" enable-background="new 0 0 76.25 39.167" xml:space="preserve"> 
<text transform="matrix(1 0 0 1 5.9336 30.417)" fill="none" stroke="red" stroke-width="0.25" stroke-miterlimit="10" font-family="'Tahoma'" font-size="36">Text</text> 
</div> 
</body> 
</html> 
2

これは不可能であり、CSS3では不可能です。 CSS3で使用できるテキストエフェクトに関する興味深い記事です。

http://www.catswhocode.com/blog/8-examples-of-stunning-css3-text-effects

別のオプションは、あなたのニーズにスイートカスタムフォントを使用することです。

このサイトは、すべてのブラウザをサポートするのに必要なあらゆる形式のフリーのオープンソースフォントを驚くほど豊富に用意しています。これはCSS2.1と互換性があり、IE7 +と互換性があります。

http://www.fontsquirrel.com/

+0

あなたは私に示したリンクの "ゼブラ"の例と同じ効果を達成するようです。 – Charlie

+0

残念ながら、その例はそのリストに属していません。それはCSS3ではなく、単に@wexによって言及された画像置換を使用しています –

+0

ええと、背景はパターンと同じ色でなければなりません。 – Charlie

1

画像のテキストをスワップアウトする技術は、ヘッダーとページナビゲーションのために一般的ですが、実際には任意の純粋なCSSのクロスブラウザの互換性のある技術(thisが素敵なテクニックですが、ISNはありませんあなたが頼りにしなければならないもの)。

あなたがにテクスチャを適用するテキストの有限量を持っている場合は、あなたの最善の策はただのような、手動で画像とテキストを置き換えることです:

HTML:

<h1 class="title">Title</h1> 

CSS:

h1.title { 
    background: url(images/title.gif) 0 0 no-repeat; 
    width: 80px; 
    height: 23px; 
    text-indent: -10000px; } 
+0

ここには、PSに入り、ヘッダーをリメイクしなくても、テキストを変更できるようにしたいと思っています。 – Charlie

+0

真。このテクニックは、「有限の量のテキスト」として使用している場合や、静的であると予想されるテキストの場合にのみ、このテクニックを推奨します。 – Wex

+0

他の方法があるのでしょうか? – Charlie

関連する問題