CSS'de arka plan olarak metin kullanmanın bir yolu var mı?

92

Etiketimdeki belirli öğelerin arka planı olarak dinamik metin kullanmak istiyorum. Bu nedenle görüntüleri (dinamik metin) kullanabilirim. Bunu sadece CSS veya JavaScript ile nasıl yaparım?

html  css  background 
— chustar
kaynak

Yanıtlar:

81

Göreli konumlandırılmış öğenizin içinde kesinlikle konumlandırılmış bir öğeye sahip olabilirsiniz:

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

Ve sonra CSS:

#container {
   position: relative;
}

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

İşte bunun bir örneği .

— Paolo Bergantino
kaynak
146

SVG metin arka plan resmi

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>
Snippet'i genişlet

İşte CSS'nin girintili bir versiyonu, böylece daha iyi anlayabilirsiniz. Bunun işe yaramadığını unutmayın, bunun yerine yukarıdaki kod parçasından tek satırlı SVG kullanmanız gerekir:

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

Bunun ne kadar taşınabilir olduğundan emin değilim (Firefox 31 ve Chrome 36'da çalışıyor) ve teknik olarak bir görüntü ... ama kaynak satır içi ve düz metindir ve sonsuza kadar ölçeklenir.

@senectus, base64 kodlarsanız IE'de daha iyi çalıştığını buldu: https://stackoverflow.com/a/25593531/895245

— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
kaynak
İlginç. Bunu yalnızca Firefox 31'de çalıştırabildim, ancak Chrome 36 veya Safari 7'de değil.
— JP Richardson
@JPRichardson Doğru, burada da aynı. Chrome 36'da arka planın orada olduğu izlenimini edindim, ancak çok küçük harflerle. Belki bazı arka plan / SVG boyut parametreleri ayarlamayı unutuyorum?
— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Ya, şu anda deney yapıyorum ... belki "viewBox" gibi görünüyor? Hala bununla uğraşıyorum.
— JP Richardson
1
Ciro: Cevabınıza göre bunu bir araya getirebildim ... oldukça iyi çalıştı! Teşekkürler! codepen.io/jprichardson/pen/GnxKr
— JP Richardson
2
@CiroSantilli 烏坎 事件 2016 六四 事件 法轮功 harika cevap! Chrome'da görüntülemeyi nasıl iyileştirebileceğiniz konusunda herhangi bir fikriniz var mı? Orası gerçekten kötü görünüyor. Şimdiden teşekkürler
— Alejandro García Iglesias
47

Bu, sözde öğelerden: before veya: after öğesini kullanan yalnızca CSS ile mümkün olabilir (ancak oldukça hack):

.bgtext {
  position: relative;
}

.bgtext:after {
  content: "Background text";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
<div class="bgtext">
  Foreground text
</div>
Snippet'i genişlet

Bu işe yarıyor gibi görünüyor, ancak muhtemelen biraz ayarlamanız gerekecek. Ayrıca desteklemediği için IE6'da çalışmayacağını unutmayın :after.

— Hoşnutsuz Keçi
kaynak
Güncelleme: Şimdilik, tüm modern tarayıcılar sözde öğeleri desteklemektedir. Örneğin, FontAwesome CSS simgeleri için böyle çalışır (kullanarak: before satır içi öğelerde).
— Cédric Françoys
Firefox'un giriş alanları gibi iç içeriğe sahip olamayan öğelerde önce ve: sonra izin vermediğini unutmayın. Bu, resmi CSS spesifikasyonuna uygundur.
— Nicolas Bouliane
21

Ciro'nun metni içeren bir SVG Veri URI arka planı hakkındaki çözümü çok akıllıca.

Ancak, düz SVG kaynağını veri URI'sına eklerseniz IE'de çalışmaz.

Bunu aşmak ve IE9 ve sonrasında çalışmasını sağlamak için SVG'yi base64 olarak kodlayın. Bu harika bir araçtır.

Yani bu:

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

Şuna dönüşür:

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

Test edildi ve IE9-10-11, WebKit (Chrome 37, Opera 23) ve Gecko (Firefox 31) ile çalışıyor.

http://jsfiddle.net/qapp5dLn/

— Senectus
kaynak
1
Bu daha iyi bir araçtır: jpillora.com/base64-encoder simpile, hata yok, otomatik doldurma, görüntü önizleme. Evet, sıçramalarda ve sınırlarda daha iyidir.
— Jack Giffin
9

@Ciro

Satır içi svg kodunu ters eğik çizgi ile kırabilirsiniz "\"

Aşağıdaki kod ile Chrome 54 ve Firefox 50'de test edilmiştir

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

Bunu bile test ettim 

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

ve çalışıyor (en azından Chrome 54 & Firefox 50 ==> NWjs & Electron garantili kullanım)

— Athmailer
kaynak
5

Saf CSS kullanma:

(Ancak bunu nadir durumlarda kullanın, çünkü HTML yöntemi TERCİH EDİLEN YOLdur ).

.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>
Snippet'i genişlet

— T.Todua
kaynak
2

Bg metnini içeren öğenin daha düşük bir yığınlama sırasına (z-endeksi, konum) sahip olmasını ve hatta muhtemelen opaklığı ayarlamasını sağlayabilirsiniz. Bu nedenle, üstte ihtiyacınız olan öğenin daha yüksek bir yığınlama sırasına (z-endeksi: 5; konum: göreli; ör. İçin) ve arkadaki öğenin daha düşük bir şeye (varsayılan veya 3 gibi daha düşük bir z-endeksi ve konum: göreli ;).

— Meder omuraliev
kaynak
0

Umarım bu sana yardımcı olabilir

<!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>
Snippet'i genişlet

— JHM16
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.