CSS에서 텍스트를 배경으로 사용하는 방법이 있습니까?

CSS에서 텍스트를 배경으로 사용하는 방법이 있습니까?

---

내 태그에서 특정 요소의 배경으로 동적 텍스트를 사용하고 싶습니다. 이 때문에 이미지 (동적 텍스트)를 사용할 수 있습니다. CSS 또는 JavaScript만으로 어떻게 수행합니까?

---

상대 위치 요소 내부에 절대 위치 요소를 가질 수 있습니다.

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

여기에 그 예가 있습니다 .

---

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

---

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

---

텍스트가 포함 된 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/

---

시로

You can break the inline svg code with back-slash "\"

Tested with the code below in Chrome 54 and 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 even Tested this,

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

and it works (at least in Chrome 54 & Firefox 50 ==> usage in NWjs & Electron guarenteed)

---

Using pure CSS:

(But use this in rare occasions, because HTML method is 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>

---

You could make the element containing the bg text have a lower stacking order ( z-index, position ) and possibly even set opacity. So the element you need on top would need a higher stacking order ( z-index:5; position:relative; for ex ) and the element behind would need something lower ( default or just a lower z-index like 3 and position:relative; ).

참고URL : https://stackoverflow.com/questions/1191464/is-there-a-way-to-use-use-text-as-the-background-with-css