Πώς να δημιουργήσετε: Εικόνα με διαφανές κείμενο

Μάθετε πώς να χρησιμοποιήσετε CSS για να δημιουργήσετε εικόνες με διαφανές (μη διαφανές) υπόβαθρο κειμένου.

Διαφανές εικόνα κείμενο

Νορβηγία
Επικεφαλίδα

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

Try it yourself

Πώς να δημιουργήσετε διαφανή εικόνα κείμενο

Βήμα 1 - Προσθέστε HTML:

<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="πλάτος:100%;">
  <div class="content">
    <h1>Επικεφαλίδα</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

Βήμα 2 - Προσθέστε CSS:

.container {
  θέση: σχετική;
  μέγιστος πλάτος: 800px; /* μέγιστος πλάτος */
  μακρύτερος: 0 auto; /* κεντρικοποιήστε το */
}
.container .content {
  θέση: αμετάβλητη; /* τοποθέτηση υπόβαθρου κειμένου */
  κάτω: 0; /* στο κάτω. Χρησιμοποιήστε top:0 για να το συνδέσετε στην κορυφή */
  βάθος: rgb(0, 0, 0); /* πίσω χρώμα */
  βάθος: rgba(0, 0, 0, 0.5); /* αδιαφανής 0.5 μαύρο υπόβαθρο */
  χρώμα: #f1f1f1; /* γκρίζια κείμενη */
  πλάτος: 100%; /* πλήρη πλάτος */
  padding: 20px; /* Some padding */
}

Try it yourself