Есть ли способ использовать текст в качестве фона с помощью CSS?

Я хотел бы использовать динамический текст в качестве фона некоторых элементов в моем теге. Из-за этого, я могу использовать изображения (динамический текст). Как это сделать с помощью только CSS или JavaScript?

7 66
html css background

7 ответов:

вы можете иметь абсолютно позиционированный элемент внутри вашего относительного позиционированного элемента:

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

здесь пример.

68

как о 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 обнаружил, что это работает лучше на IE, если вы base64 кодировать его:https://stackoverflow.com/a/25593531/895245

93

это может быть возможно (но очень 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.

35

решение Ciro о фоне URI данных SVG, содержащем текст, очень умно.

однако он не будет работать в IE, если вы просто добавите простой источник SVG в URI данных.

чтобы обойти это и заставить его работать в 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) и Гекко (В Firefox 31).

http://jsfiddle.net/qapp5dLn/

15

вы можете сделать элемент, содержащий текст bg, более низким порядком укладки (Z-индекс, позиция ) и, возможно, даже установить непрозрачность. Так что элемент сверху необходимую потребуется более высокий порядок укладки ( Z-индекса:5; положение:родственника; например ) и элемент за понадобится что-то ниже ( по умолчанию или меньшим Z-индексом 3 и позиция:относительная; ).

2

@Ciro

вы можете сломать встроенный код 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 guarenteed)

2

используя чистый CSS:

(однако, используйте это в редких случаях, потому что метод HTML является гораздо предпочтительным способом, то это).

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