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

92

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

html  css  background 
— Chustar
소스

답변:

81

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

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

여기에 그 예가 있습니다 .

— 파올로 베르 간 티노
소스
146

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

— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
소스
흥미 롭군. 난 단지 파이어 폭스 31 일이를 얻을 수 있지만 크롬 36 사파리 (7) 수
— JP 리처드슨
@JPRichardson True, 여기도 마찬가지입니다. Chrome 36에서는 배경이 있지만 아주 작은 글자로 된 인상이 있습니다 . 배경 / SVG 크기 매개 변수를 설정하는 것을 잊었습니까?
— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
예, 지금 실험 중입니다 ... "viewBox"처럼 보이나요? 나는 아직도 그것을 엉망으로 만들고있다.
— JP Richardson
1
Ciro : 귀하의 답변을 바탕으로 저는 이것을 조합 할 수있었습니다 ... 꽤 잘 작동했습니다! 감사! codepen.io/jprichardson/pen/GnxKr
— JP Richardson
2
@CiroSantilli 烏坎 事件 2016 六四 事件 法轮功 좋은 대답! Chrome에서 렌더링을 개선하는 방법에 대한 아이디어가 있습니까? 정말 안좋아 보입니다. 미리 감사드립니다
— Alejandro García Iglesias
47

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

— 불만을 품은 염소
소스
업데이트 : 현재 모든 최신 브라우저는 유사 요소를 지원합니다. 예를 들어 FontAwesome이 CSS 아이콘에 대해 작동하는 방식입니다 (인라인 요소에서 : before 사용).
— Cédric Françoys
Firefox는 입력 필드와 같이 내부 내용을 가질 수없는 요소에 대해 : before 및 : after를 허용하지 않습니다. 이것은 공식 CSS 사양을 준수합니다.
— Nicolas Bouliane
21

텍스트를 포함하는 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/

— 세넥 투스
소스
1
이것은 더 나은 도구입니다 : jpillora.com/base64-encoder simpile, 오류 없음, 자동 채우기, 이미지 미리보기. 네, 도약과 경계에서 더 좋습니다.
— 잭 Giffin
9

시로

백 슬래시로 인라인 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에서 사용 보장)

— Athmailer
소스
5

순수 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>
스 니펫 확장

— T. 토 두아
소스
2

bg 텍스트를 포함하는 요소를 더 낮은 스택 순서 (z-index, position)로 만들고 불투명도를 설정할 수도 있습니다. 따라서 상단에 필요한 요소는 더 높은 스택 순서 (z-index : 5; position : relative; for ex)가 필요하고 뒤에있는 요소는 더 낮은 값 (기본값 또는 3 및 position : relative와 같은 더 낮은 Z- 색인)이 필요합니다. ;).

— Meder Omuraliev
소스
0

도움이 되었기를 바랍니다.

<!DOCTYPE html>
<html>
<head>
<style>

 :root:after { 
         
            content: "Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark   Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark "; 
            position: fixed; 
            transform: rotate(300deg); 
            -webkit-transform: rotate(300deg); 
            color: rgb(187, 182, 182); 
            top:0;                     
            z-index: -1; 
        } 
</style>
</head>
<body>
<p>hey my name is JHM</p>
</body>
</html>
스 니펫 확장

— JHM16
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.