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

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

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

Βήμα 1 - Προσθήκη HTML:

<div class="bg-image"></div>
<div class="bg-text">
  <h1>Είμαι ο Bill Gates</h1>
  <p>Και είμαι ένας Φωτογράφος</p>
</div>

Βήμα 2 - Προσθήκη CSS:

σώμα, html {
  υψόμετρο: 100%;
}
* {
  καθορισμός κουτίου: περιλαμβάνει το περιεχόμενο;
}
.bg-image {
  /* χρησιμοποιούμενη εικόνα */
  χρώμα υποβάθρου: url("photographer.jpg");
  /* προσθέστε θολότητα */
  φίλτρο: θολότητα(8px);
  -webkit-φίλτρο: θολότητα(8px);
  /* πλήρη ύψος */
  υψόμετρο: 100%;
  /* τοποθετήστε την εικόνα στο κέντρο και προσαρμόστε την κεντρικά */
  τοποθεσία υποβάθρου: κέντρο;
  χρώμα επανάληψης υποβάθρου: χωρίς επανάληψη;
  χρώμα υποβάθρου: περιέχει;
}
/* τοποθετήστε το κείμενο στο κέντρο της σελίδας/εικόνας */
.bg-text {
  χρώμα υποβάθρου: rgb(0,0,0); /* υποκατάσταση χρώματος */
  χρώμα υποβάθρου: rgba(0,0,0, 0.4); /* μαύρο ημιδιαφανές/διαφανές */
  χρώμα: λευκό;
  βαρύτητα γραμματοσειράς: έντονη;
  κλίμακα: 3px σκληρός χρώμας #f1f1f1;
  θεματική τοποθέτηση: απεριόριστη;
  αρκετή: 50%;
  αριστερά: 50%;
  μετατρέπω: μετακίνηση(-50%, -50%);
  z-index: 2;
  πλάτος: 80%;
  padding: 20px;
  text-align: center;
}

Προσπαθήστε το προσωπικά