Apakah ada cara untuk menggunakan teks sebagai latar belakang dengan CSS?

92

Saya ingin menggunakan teks dinamis sebagai latar belakang elemen tertentu di tag saya. Karena itu, saya bisa menggunakan gambar (teks dinamis). Bagaimana cara melakukannya hanya dengan CSS atau JavaScript?

html css background chustar
sumber

Jawaban:

81

Anda dapat memiliki elemen yang benar-benar diposisikan di dalam elemen posisi relatif Anda:

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

Dan kemudian CSS:

#container {
   position: relative;
}

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

Berikut ini contohnya .

Paolo Bergantino
sumber
146

Gambar latar belakang teks 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>
Luaskan cuplikan

Ini adalah versi CSS yang menjorok sehingga Anda dapat memahami dengan lebih baik. Perhatikan bahwa ini tidak berfungsi , Anda harus menggunakan SVG satu baris dari cuplikan di atas:

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

Tidak yakin seberapa portabel ini (berfungsi di Firefox 31 dan Chrome 36), dan secara teknis ini adalah gambar ... tetapi sumbernya adalah teks sebaris dan biasa, dan berskala tak terbatas.

@senectus menemukan bahwa ini berfungsi lebih baik di IE jika Anda menyandikan base64: https://stackoverflow.com/a/25593531/895245

Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
sumber
Menarik. Saya hanya bisa mendapatkan ini untuk bekerja di Firefox 31, tetapi tidak di Chrome 36 atau Safari 7.
JP Richardson
@JPRichardson Benar, sama di sini. Di Chrome 36 saya mendapat kesan bahwa latar belakangnya ada, tetapi pada huruf yang sangat kecil. Mungkin saya lupa menyetel beberapa parameter ukuran latar belakang / SVG?
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Ya, saya sedang bereksperimen dengannya saat ini ... mungkin terlihat seperti "viewBox"? Aku masih mengotak-atiknya.
JP Richardson
1
Ciro: berdasarkan jawaban Anda, saya bisa menggabungkan ini ... bekerja dengan cukup baik! Terima kasih! codepen.io/jprichardson/pen/GnxKr
JP Richardson
2
@Dimas_depok 烏坎 事件 2016 六四 事件 法轮功 jawaban yang bagus! Apakah Anda punya ide tentang cara meningkatkan rendering di Chrome? Terlihat sangat buruk di sana. Terima kasih sebelumnya
Alejandro García Iglesias
47

Ini mungkin saja (tapi sangat meretas) dengan hanya CSS yang menggunakan elemen pseudo: sebelum atau: setelah:

.bgtext {
  position: relative;
}

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

Ini sepertinya berhasil, tetapi Anda mungkin perlu sedikit mengubahnya. Juga perhatikan itu tidak akan berfungsi di IE6 karena tidak mendukung :after.

Kambing Tidak Puas
sumber
Pembaruan: Untuk saat ini, semua browser modern mendukung elemen semu. Misalnya begitulah cara kerja FontAwesome untuk ikon CSS (menggunakan: before pada elemen inline).
Cédric Françoys
Perlu diketahui bahwa Firefox tidak mengizinkan: sebelum dan: setelah pada elemen yang tidak boleh memiliki konten dalam, seperti bidang masukan. Ini menghormati spesifikasi CSS resmi.
Nicolas Bouliane
21

Solusi Ciro tentang latar belakang URI Data SVG yang berisi teks sangat cerdas.

Namun, ini tidak akan berfungsi di IE jika Anda hanya menambahkan sumber SVG biasa ke URI data.

Untuk menyiasati ini dan membuatnya berfungsi di IE9 dan yang lebih baru, encode SVG ke base64. Ini adalah alat yang hebat.

Jadi ini:

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

Menjadi ini:

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

Diuji dan berfungsi di IE9-10-11, WebKit (Chrome 37, Opera 23) dan Gecko (Firefox 31).

http://jsfiddle.net/qapp5dLn/

senectus
sumber
1
Ini adalah alat yang lebih baik: jpillora.com/base64-encoder simpile, tidak ada kesalahan, pengisian otomatis, pratinjau gambar. Ya, itu lebih baik dalam lompatan dan batasan.
Jack Giffin
9

@Ciro

Anda dapat memecahkan kode svg sebaris dengan garis miring terbalik "\"

Diuji dengan kode di bawah ini di Chrome 54 dan 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>");
}

Saya bahkan menguji ini, 

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

dan berfungsi (setidaknya di Chrome 54 & Firefox 50 ==> penggunaan di NWjs & Electron dijamin)

Athmailer
sumber
5

Menggunakan CSS murni:

(Tetapi gunakan ini dalam kesempatan yang jarang, karena metode HTML adalah CARA YANG DIUTAMAKAN ).

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

T.Todua
sumber
2

Anda dapat membuat elemen yang berisi teks bg memiliki urutan yang lebih rendah (z-indeks, posisi) dan bahkan mungkin menyetel opasitas. Jadi elemen yang Anda butuhkan di atas akan membutuhkan urutan tumpukan yang lebih tinggi (z-index: 5; position: relative; for ex) dan elemen di belakang akan membutuhkan sesuatu yang lebih rendah (default atau hanya indeks-z yang lebih rendah seperti 3 dan position: relative ;).

meder omuraliev
sumber
0

Saya harap ini bisa membantu Anda

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

JHM16
sumber