내 태그에서 특정 요소의 배경으로 동적 텍스트를 사용하고 싶습니다. 이 때문에 이미지 (동적 텍스트)를 사용할 수 있습니다. 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)에서 작동합니다.
답변
시로
백 슬래시로 인라인 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에서 사용 보장)
답변
순수 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>답변
bg 텍스트를 포함하는 요소를 더 낮은 스택 순서 (z-index, position)로 만들고 불투명도를 설정할 수도 있습니다. 따라서 상단에 필요한 요소는 더 높은 스택 순서 (z-index : 5; position : relative; for ex)가 필요하고 뒤에있는 요소는 더 낮은 값 (기본값 또는 3 및 position : relative와 같은 더 낮은 Z- 색인)이 필요합니다. ;).
