it-swarm.com.ru

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

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

74
chustar

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

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

Вот пример тому .

73
Paolo Bergantino

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

Это возможно (но очень хакерски) только с использованием CSS с использованием псевдоэлементов: before или: after:

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

37
DisgruntledGoat

Решение 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) и Gecko (Firefox 31).

http://jsfiddle.net/qapp5dLn/

19
senectus

@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 гарантировано)

7
Athmailer

Используя чистый 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>
5
T.Todua

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

3
meder omuraliev