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

Ответ 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;
}

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

Ответ 2

Как о фоновом изображении текста 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>

Ответ 3

Это может быть возможно (но очень хакерское) только с CSS, используя: перед или: после псевдоэлементов:

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

Ответ 4

Решение Ciro относительно фона SVG Data URI, содержащего текст, очень умно.

Однако он не будет работать в 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) и Gecko (Firefox 31).

http://jsfiddle.net/qapp5dLn/

Ответ 5

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

Ответ 6

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