112

タグ内の特定の要素の背景としてダイナミック テキストを使用したいと考えています。このため、画像 (動的テキスト) を使用できます。CSS や JavaScript だけでそれを行うにはどうすればよいですか?

4

9 に答える 9

168

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

于 2014-08-27T20:54:57.610 に答える
93

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

#container {
   position: relative;
}

#background {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   overflow: hidden;
}
<div id="container">
    <div id="background">
    Text to have as background
    </div>
    Normal contents
</div>

これがその例です。

于 2009-07-28T01:20:05.400 に答える
54

: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>

これは機能しているように見えますが、おそらく少し調整する必要があります。また、IE6 ではサポートされていないため、動作しないことに注意してください:after。

于 2009-07-28T01:37:59.560 に答える
22

テキストを含む 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/

于 2014-08-31T15:34:43.660 に答える
10

@チロ

バックスラッシュでインライン 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での使用が保証されています）

于 2016-11-27T22:49:44.237 に答える
8

純粋な CSS を使用する:

(ただし、 HTML メソッドは Preferred WAYであるため、まれに使用します)。

.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>

于 2018-01-19T21:22:34.120 に答える
2

bg テキストを含む要素のスタック順序を低くし ( z-index, position )、場合によっては不透明度を設定することもできます。したがって、一番上に必要な要素には、より高い積み重ね順序（ z-index:5; position:relative; for ex ）が必要であり、背後の要素には、より低いものが必要です（デフォルトまたは 3 のようなより低い z-index および position:relative ; )。

于 2009-07-28T01:20:24.713 に答える