web-dev-qa-db-ja.com

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

タグの特定の要素の背景としてダイナミックテキストを使用したいと思います。このため、画像（ダイナミックテキスト）を使用できます。 CSSまたはJavaScriptだけでそれを行うにはどうすればよいですか？

htmlcssbackground
78
chustar

相対配置要素内に絶対配置要素を含めることができます。

<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;
}

その例 です。

75
Paolo Bergantino

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>");
}
<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>

CSSのインデントバージョンを以下に示します。 これは機能しないことに注意してください、代わりに上記のスニペットからシングルライナー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>");
}

これがどれだけ移植性があるかはわかりません（Firefox 31およびChrome 36で動作します）。技術的には画像です...

@senectusは、base64でエンコードするとIEでより適切に動作することがわかりました。 https://stackoverflow.com/a/25593531/895245

117
Ciro Santilli 新疆改造中心996ICU六四事件

：beforeまたは：after擬似要素を使用するCSSのみで可能ですが（非常にハック的）：

.bgtext {
  position: relative;
}

.bgtext:after {
  content: "Background text";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
<div class="bgtext">
  Foreground text
</div>

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

40
DisgruntledGoat

テキストを含むSVGデータURIの背景に関するCiroのソリューションは非常に巧妙です。

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

これを回避してIE9以降で動作させるには、SVGをbase64にエンコードします。 これは素晴らしいツールです。

したがって、この：

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（Chrome 37、Opera 23）およびGecko（Firefox 31）で動作確認済みです。

http://jsfiddle.net/qapp5dLn/

19
senectus

@Ciro

バックスラッシュ"\"を使用して、インラインsvgコードを分割できます。

Chrome 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>");
}

私もこれをテストしました、

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およびElectronでの使用は保証されています）

7
Athmailer

純粋なCSSの使用：

（しかし、これはまれに使用します。なぜなら、HTMLメソッドの方が好ましい方法です）。

.container{
        position:relative;
}
.container::before{ 
        content:"";
        width: 100%; height: 100%; position: absolute; background: black; opacity: 0.3; z-index: 1;  top: 0;   left: 0;
        background: black;
}
.container::after{ 
        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;
        animation-name: blinking;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
}
@keyframes blinking {
        0% {opacity: 0;}
        100% {opacity: 1;}
}
<div class="container">here is main content, text , <br/> images and other page details</div>
5
T.Todua

Bgテキストを含む要素のスタック順序（z-index、position）を低くし、場合によっては不透明度を設定することもできます。そのため、一番上に必要な要素には、より高いスタック順（z-index：5; position：relative; for）が必要で、後ろの要素にはもっと低いものが必要です（デフォルト、または3やposition：relativeのようなより低いz-index ;）。

2
meder omuraliev