Η συνάρτηση blur() της CSS

Ορισμός και χρήση

Η CSS blur() Η συνάρτηση φίλτρου εφαρμόζει το εφέ διαφάνειας στο στοιχείο. Η τιμή είναι μεγαλύτερη, το εφέ διαφάνειας είναι πιο έντονο.

Αν δεν καθοριστεί τιμή, χρησιμοποιείται εξ ορισμού το 0.

Παράδειγμα

Παράδειγμα 1

Εφαρμογή διαφορετικών εφέ διαφάνειας στα στοιχεία <h1> και <img>:

h1 {
  filter: blur(2px);
}
#img1 {
  filter: blur(2px);
}
#img2 {
  filter: blur(6px);
}

Προσπάθησε να το δοκιμάσεις!

Παράδειγμα 2

Δημιουργία διαφανούς παρασκηνίου:

img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}

Προσπάθησε να το δοκιμάσεις!

CSS Γραμματική

blur(radius)
Τιμή Περιγραφή
radius

Επιλογή. Ορίζει το ακτίνα της διαφάνειας. Η τιμή είναι μεγαλύτερη, η διαφάνεια είναι πιο έντονη.

Αν δεν καθοριστεί τιμή, χρησιμοποιείται εξ ορισμού το 0 (μηδέν αποτέλεσμα).

Τεχνικά λεπτομέρειες

Έκδοση: CSS Filter Effects Module Level 1

Υποστήριξη προγράμματος περιήγησης

Τα αριθμήματα στη τάβλη αναφέρονται στην έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τη συναρτηση.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

σχετικές σελίδες

Αναφορά:CSS filter ποιότητα

Αναφορά:CSS brightness() συνάρτηση

Αναφορά:CSS contrast() συναρτηση

Αναφορά:CSS drop-shadow() συναρτηση

Αναφορά:CSS grayscale() συναρτηση

Αναφορά:CSS hue-rotate() συναρτηση

Αναφορά:CSS invert() συναρτηση

Αναφορά:CSS opacity() συναρτηση

Αναφορά:CSS saturate() συνάρτηση

Αναφορά:CSS sepia() συνάρτηση