Czy istnieje sposób na użycie tekstu jako tła w CSS?

92

Chciałbym użyć dynamicznego tekstu jako tła niektórych elementów w moim tagu. Dzięki temu mogę używać obrazów (tekst dynamiczny). Jak to zrobić za pomocą samego CSS lub JavaScript?

html  css  background 
— chustar
źródło

Odpowiedzi:

81

Możesz mieć element pozycjonowany absolutnie wewnątrz elementu pozycjonowanego względnie:

<div id="container">
    <div id="background">
    Text to have as background
    </div>
    Normal contents
</div>

A potem CSS:

#container {
   position: relative;
}

#background {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   overflow: hidden;
}

Oto przykład .

— Paolo Bergantino
źródło
146

Obraz tła tekstu 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>
Rozwiń fragment

Oto wersja CSS z wcięciami, dzięki czemu możesz lepiej zrozumieć. Zauważ, że to nie działa , zamiast tego musisz użyć pliku SVG z pojedynczą linijką z powyższego fragmentu:

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

Nie jestem pewien, jak to jest przenośne (działa w Firefoksie 31 i Chrome 36) i technicznie jest to obraz ... ale źródło jest w wierszu i zwykłym tekstem i skaluje się w nieskończoność.

@senectus stwierdził, że działa lepiej w IE, jeśli zakodujesz go base64: https://stackoverflow.com/a/25593531/895245

— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
źródło
Ciekawy. Mogłem to uruchomić tylko w przeglądarce Firefox 31, ale nie w Chrome 36 ani Safari 7.
— JP Richardson
@JPRichardson True, to samo tutaj. Na Chrome 36 mam wrażenie, że jest tam tło, ale na bardzo drobnych literach. Może zapominam o ustawieniu jakiegoś parametru rozmiaru tła / SVG?
— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Tak, w tej chwili z tym eksperymentuję ... wygląda na to, że może „viewBox”? Nadal się z tym bawię.
— JP Richardson
1
Ciro: w oparciu o twoją odpowiedź udało mi się to połączyć ... działało całkiem nieźle! Dzięki! codepen.io/jprichardson/pen/GnxKr
— JP Richardson
2
@CiroSantilli 烏坎 事件 2016 六四 事件 法轮功 great answer! Czy masz jakieś pomysły, jak ulepszyć renderowanie w Chrome? Tam wygląda naprawdę źle. Z góry dziękuję
— Alejandro García Iglesias
47

Może to być możliwe (ale bardzo hakerskie) tylko przy użyciu CSS z pseudoelementami: before lub: after:

.bgtext {
  position: relative;
}

.bgtext:after {
  content: "Background text";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
<div class="bgtext">
  Foreground text
</div>
Rozwiń fragment

Wydaje się, że to działa, ale prawdopodobnie będziesz musiał to trochę poprawić. Pamiętaj też, że nie będzie działać w IE6, ponieważ nie obsługuje :after.

— Niezadowolony Kozioł
źródło
Aktualizacja: na razie wszystkie nowoczesne przeglądarki obsługują pseudoelementy. Na przykład tak działa FontAwesome dla ikon CSS (używając: before w elementach inline).
— Cédric Françoys
Pamiętaj tylko, że Firefox nie zezwala na elementy, które nie mogą mieć wewnętrznej zawartości, takie jak pola wejściowe, przed i: po. Jest to zgodne z oficjalną specyfikacją CSS.
— Nicolas Bouliane
21

Rozwiązanie Ciro dotyczące tła SVG Data URI zawierającego tekst jest bardzo sprytne.

Jednak nie zadziała w IE, jeśli po prostu dodasz zwykłe źródło SVG do identyfikatora URI danych.

Aby obejść ten problem i sprawić, by działał w IE9 i nowszych, zakoduj SVG do base64. To świetne narzędzie.

Więc to:

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>');

Staje się tym:

background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUlIiB5PSI1JSIgZm9udC1zaXplPSIzMCIgZmlsbD0icmVkIj5JIGxvdmUgU1ZHITwvdGV4dD48L3N2Zz4=');

Przetestowany i działa w IE9-10-11, WebKit (Chrome 37, Opera 23) i Gecko (Firefox 31).

http://jsfiddle.net/qapp5dLn/

— senectus
źródło
1
To jest lepsze narzędzie: jpillora.com/base64-encoder simpile, brak błędów, autouzupełnianie, podgląd obrazu. Tak, jest lepszy w skokach i na krawędzi.
— Jack Giffin
9

@Ciro

Możesz złamać wbudowany kod SVG za pomocą odwrotnego ukośnika "\"

Testowane za pomocą poniższego kodu w przeglądarce Chrome 54 i 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>");
}

Nawet to przetestowałem, 

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>\
");

i działa (przynajmniej w Chrome 54 i Firefox 50 ==> użycie w gwarancji NWjs i Electron)

— Athmailer
źródło
5

Korzystanie z czystego CSS:

(Ale używaj tego w rzadkich przypadkach, ponieważ metoda HTML jest PREFEROWANA ).

.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>
Rozwiń fragment

— T.Todua
źródło
2

Możesz sprawić, by element zawierający tekst bg miał niższą kolejność układania (indeks z, pozycja), a nawet ustawić krycie. Tak więc element, którego potrzebujesz na górze, wymagałby wyższej kolejności układania (indeks z: 5; pozycja: względna; na przykład), a element za nim wymagałby czegoś niższego (domyślnego lub po prostu niższego indeksu z, takiego jak 3 i pozycja: względna ;).

— meder omuraliev
źródło
0

Mam nadzieję, że to może ci pomóc

<!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>
Rozwiń fragment

— JHM16
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.