有沒有辦法使用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-index，position），甚至可以設置不透明度。因此，您需要的頂層元素需要更高的堆疊順序（z-index：5; position：relative;對於ex），而後面的元素需要更低的值（默認值或只是較低的z-index值，如3和position：relative ;）。

Answer 3

它可以使用可能（但很hackish的）只有CSS的：before或：after僞元素：

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

這似乎是工作，但你可能需要調整它一點點。另外請注意，它不適用於IE6，因爲它不支持:after。

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

不知道如何：

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）的縮進版本這是可移植的（適用於Firefox 31和Chrome 36），它在技術上是一個圖像......但源代碼是內聯和純文本，並且可以無限擴展。

@senectus發現，它的作品更好的IE瀏覽器，如果你Base64編碼它：https://stackoverflow.com/a/25593531/895245

Answer 5

西羅的大約包含文本的SVG數據URI背景的解決方案是非常聰明的。

但是，如果您只是將普通的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）和蛤蚧（火狐31）的作品。

http://jsfiddle.net/qapp5dLn/

Answer 6

@Ciro

你可以用下面的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>"); 
} 

我測試反斜槓"\"

打破聯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 &火狐50 ==>使用情況NWjs &電子保證的廣告）

Answer 7

使用純CSS：

（但是，在極少數情況下使用，因爲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>