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

Чиро Сантилли 郝海东 冠状 病 六四 事件 法轮功
источник
Интересно. Я смог заставить это работать только в Firefox 31, но не в Chrome 36 или Safari 7.
JP Richardson,
@JPRichardson Верно, здесь то же самое. В Chrome 36 у меня такое впечатление, что фон есть, но с очень маленькими буквами. Может, я забыл установить какой-нибудь параметр размера фона / SVG?
Чиро Сантилли 郝海东 冠状 病 六四 事件 法轮功
Да, сейчас экспериментирую ... похоже, "viewBox"? Я все еще возился с этим.
JP Richardson,
1
Чиро: основываясь на вашем ответе, я смог собрать это вместе ... сработало очень хорошо! Благодарность! codepen.io/jprichardson/pen/GnxKr
JP Richardson
2
@CiroSantilli 烏坎 事件 2016 六四 事件 法轮功 отличный ответ! У вас есть идеи, как улучшить рендеринг в Chrome? Там очень плохо смотрится. Заранее спасибо
Алехандро Гарсиа Иглесиас
47

Это может быть возможным (но очень хакерским) с использованием только 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.

НедовольныйКозел
источник
Обновление: на данный момент все современные браузеры поддерживают псевдоэлементы. Например, так FontAwesome работает для значков CSS (используя: before во встроенных элементах).
Cédric Françoys
Просто имейте в виду, что Firefox не разрешает: before и: after для элементов, которые не могут иметь внутреннего содержимого, таких как поля ввода. Это соответствует официальной спецификации CSS.
Николя Булиан,
21

Решение 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/

сенектус
источник
1
Это лучший инструмент: jpillora.com/base64-encoder simpile, без ошибок, автозаполнение, предварительный просмотр изображений. Ага, лучше семимильными шагами.
Джек Гиффин
9

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

Athmailer
источник
5

Используя чистый 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>
Развернуть фрагмент

Т. Тодуа
источник
2

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

Медер Омуралиев
источник
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
источник