CSSの背景としてテキストを使用する方法はありますか？

Question

私は、タグ内の特定の要素の背景として動的テキストを使用したいと思います。このため、イメージ（動的テキスト）を使用できます。 CSSやJavaScriptだけではどうすればいいですか？

Answer 1

あなたの相対的位置要素の内側に絶対位置要素持つことができます。

<div id="container"> 
    <div id="background"> 
    Text to have as background 
    </div> 
    Normal contents 
</div> 

をそしてCSS：

#container { 
    position: relative; 
} 

#background { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: -1; 
    overflow: hidden; 
} 

はここan example of itです。

Answer 2

bgテキストを含む要素のスタッキング順序（z-インデックス、位置）を低くし、不透明度を設定することもできます。したがって、上に必要な要素は、より高い積み重ね順序（z-index：5; position：relative; exの場合）を必要とし、背後の要素は何か低い値を必要とします（デフォルトまたは3やposition：relative ;）。

Answer 3

それは使用してのみCSSで可能な（しかし非常にハック）であってもよい：擬似要素の後に：：前または

<style type="text/css"> 
    .bgtext { 
    position: relative; 
    } 
    .bgtext:after { 
    content: "Background text"; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    } 
</style> 

<div class="bgtext"> 
    Foreground text 
</div> 

これが動作しているようですが、あなたはおそらくそれを少し微調整する必要があります。また、それは:afterをサポートしていないので、IE6では動作しません。

Answer 4

SVGテキストの背景画像？

body { 
    background-image:url("data:image/svg+xml;utf8, 
    <svg xmlns='http://www.w3.org/2000/svg' version='1.1' 
     height='50px' width='120px'> 
    <text x='0' y='15' fill='red' font-size='20'>I love SVG!</text> 
    </svg>"); 
} 

ないか確認してください：あなたは（これは、あなたが単一のライナーSVGを使用するない作業必要ない）よりよく理解できるように、CSSの

body { 
 
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='15' fill='red' font-size='20'>I love SVG!</text></svg>"); 
 
}

<p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p> 
 
<p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p>

インデントバージョンポータブルです（これはFirefox 31とChrome 36で動作します）、技術的には画像ですが、ソースはインラインでプレーンテキストであり、無限に拡大します。

@senectusは、あなたがそれをコード化するbase64であれば、それはIEでうまく機能することを発見：テキストを含むSVGデータURIの背景についてhttps://stackoverflow.com/a/25593531/895245

Answer 5

チロのソリューションは非常に賢いです。

ただし、単純なSVGソースをデータURIに追加するだけでIEでは動作しません。

これを回避してIE9以降で動作させるには、SVGをbase64にエンコードします。 This is a great tool.

だから、この：

background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><text x="5%" y="5%" font-size="30" fill="red">I love SVG!</text></svg>'); 

はこのようになります。

background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUlIiB5PSI1JSIgZm9udC1zaXplPSIzMCIgZmlsbD0icmVkIj5JIGxvdmUgU1ZHITwvdGV4dD48L3N2Zz4='); 

はテストの結果、それがIE9-10-11、WebKitの（クロム37、オペラ23）とのGecko（Firefoxの31）で動作します。

http://jsfiddle.net/qapp5dLn/

Answer 6

@Ciro

あなたはバックスラッシュクローム54とFirefox 50

で以下のコード

body { 
    background: transparent; 
    background-attachment:fixed; 
    background-image: url(
    "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='170px' height='50px'> \ 
    <rect x='0' y='0' width='170' height='50' style='stroke:white; fill:gray; stroke-opacity: 0.3; stroke-width: 3px; fill-opacity: 0.7; stroke-dasharray: 10 5; stroke-linecap=round; '/> \ 
    <text x='85' y='30' style='fill:lightBlue; text-anchor: middle' font-size='16' transform='rotate(10,85,25)'>I love SVG!</text></svg>"); 
} 

Iでテスト"\"

とインラインSVGコードを破ることができますテスト済みでさえ、

background-image: url("\ 
data:image/svg+xml;utf8, \ 
    <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='170px' height='50px'> \ 
    <rect x='0' y='0' width='170' height='50'\ 
     style='stroke:white; stroke-width: 3px; stroke-opacity: 0.3; \ 
      stroke-dasharray: 10 5; stroke-linecap=round; \ 
      fill:gray; fill-opacity: 0.7; '/> \ 
    <text x='85' y='30' \ 
     style='fill:lightBlue; text-anchor: middle' font-size='16' \ 
     transform='rotate(10,85,25)'> \ 
     I love SVG! \ 
    </text> \ 
    </svg>\ 
"); 

、それが動作します（少なくともChromeで54 & Firefoxの50 ==> NWjs &電子guarenteedでの使用）、純粋なCSSの使用

Answer 7

：

は

（ただし、まれにこれを使用し、HTML方式理由はるか優先されています。

.container{ 
 
\t position:relative; 
 
} 
 
.container::before{ 
 
\t content:""; 
 
\t width: 100%; height: 100%; position: absolute; background: black; opacity: 0.3; z-index: 1; top: 0; left: 0; 
 
\t background: black; 
 
} 
 
.container::after{ 
 
\t content: "Your Text"; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 3; overflow: hidden; font-size: 2em; color: red; text-align: center; text-shadow: 0px 0px 5px black; background: #0a0a0a8c; padding: 5px; 
 
\t animation-name: blinking; 
 
\t animation-duration: 1s; 
 
\t animation-iteration-count: infinite; 
 
\t animation-direction: alternate; 
 
} 
 
@keyframes blinking { 
 
\t 0% {opacity: 0;} 
 
\t 100% {opacity: 1;} 
 
}

<div class="container">here is main content, text , <br/> images and other page details</div>