Πώς μπορώ να ορίσω το χρώμα φόντου μόνο για το στοχευμένο κείμενο, χρησιμοποιώντας μόνο CSS;

Question

Πώς μπορώ να προσθέσω δυναμικά ένα πράσινο φόντο πίσω από το κείμενο, όχι σε όλο το πλάτος της σελίδας, μόνο στο κείμενο.

Problem

Το πράσινο επεκτείνεται σε ολόκληρη τη σελίδα με τον τρέχοντα κώδικά μου. Δεν μπορώ να τροποποιήσω την HTML ή τη Javascript, μόνο το αρχείο CSS.

HTML

<h1>The Last Will and Testament of Eric Jones</h1> 

CSS

h1 { 
    text-align: center; 
    background-color: green; 
}
Λύση

Τοποθετήστε το κείμενο σε ένα [inline στοιχείο][1], όπως ένα <span>.

Σχόλια (7)

Ένα πολύ απλό τέχνασμα για να το κάνετε αυτό, είναι να προσθέσετε μια ετικέτα <span> και να προσθέσετε χρώμα φόντου σε αυτήν. Θα φαίνεται ακριβώς όπως το θέλετε.

<h1>  
    <span>The Last Will and Testament of Eric Jones</span>
</h1> 

Και CSS

h1 { text-align: center; }
h1 span { background-color: green; }

WHY?

<span> σε μια ετικέτα στοιχείου inline, έτσι ώστε να εκτείνεται μόνο πάνω από το περιεχόμενο που προσποιείται το αποτέλεσμα.

Σχόλια (0)

Δοκιμάστε να αφαιρέσετε το text-alignment center και να κεντράρετε το <h1> ή το <div> στο οποίο βρίσκεται το κείμενο.

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}
Σχόλια (0)