Metnin arkasına dinamik olarak nasıl yeşil bir arka plan ekleyebilirim, tüm sayfa genişliğini değil, sadece metni.
Yeşil, mevcut kodumla tüm sayfaya yayılıyor. HTML veya Javascript'i değiştiremiyorum, sadece CSS dosyasını değiştirebiliyorum.
<h1>The Last Will and Testament of Eric Jones</h1>
h1 {
text-align: center;
background-color: green;
}
Metni <span>
gibi bir satır içi öğe içine yerleştirin.
<h1><span>The Last Will and Testament of Eric Jones</span></h1>
Ardından arka plan rengini satır içi öğeye uygulayın.
h1 {
text-align: center;
}
h1 span {
background-color: green;
}
Bir satır içi öğe, içeriği kadar büyüktür, bu nedenle bu sizin için yeterli olacaktır.
Bunu yapmak için çok basit bir numara, bir <span>
etiketi eklemek ve buna arka plan rengi eklemektir. Tam istediğiniz gibi görünecektir.
<h1>
<span>The Last Will and Testament of Eric Jones</span>
</h1>
Ve CSS
h1 { text-align: center; }
h1 span { background-color: green; }
<span>
etiketini bir satır içi öğe etiketi içinde kullanın, böylece efekti taklit ederek yalnızca içeriğin üzerine yayılır.
Metin hizalama merkezini kaldırmayı ve metnin içinde bulunduğu <h1>
veya <div>
öğesini ortalamayı deneyin.
h1 {
background-color:green;
margin: 0 auto;
width: 200px;
}