Чи є спосіб використовувати текст як фон для CSS?

Question 1

Я хотів би використовувати динамічний текст як фон певних елементів у моєму тегу. Через це я можу використовувати зображення (динамічний текст). Як це зробити лише за допомогою CSS або JavaScript?

Question 2

Ви можете мати абсолютно позиціонований елемент всередині вашого відносно розташованого елемента:

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

Ось приклад цього .

Question 3

Фонове зображення у форматі 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

Question 4

Це може бути можливим (але дуже хакерським) лише за допомогою 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.

Question 5

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

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

Question 7

Використання чистого 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>

Розгорніть фрагмент

Question 8

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

Question 9

Сподіваюся, це може вам допомогти

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

Розгорніть фрагмент