Πώς να εφαρμόσετε ένα φίλτρο CSS σε μια εικόνα φόντου ?

Έχω ένα αρχείο JPEG που χρησιμοποιώ ως εικόνα φόντου για μια σελίδα αναζήτησης και χρησιμοποιώ CSS για να το ορίσω επειδή εργάζομαι μέσα σε πλαίσια Backbone.js:

background-image: url("whatever.jpg");

Θέλω να εφαρμόσω ένα φίλτρο θόλωσης CSS 3 μόνο στο φόντο, αλλά δεν είμαι σίγουρος πώς να διαμορφώσω μόνο αυτό το ένα στοιχείο. Αν δοκιμάσω:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

ακριβώς κάτω από το background-image στο CSS μου, διαμορφώνει ολόκληρη τη σελίδα και όχι μόνο το φόντο. Υπάρχει τρόπος να επιλέξω μόνο την εικόνα και να εφαρμόσω το φίλτρο σε αυτήν; Εναλλακτικά, υπάρχει τρόπος να απενεργοποιήσω το θόλωμα για κάθε άλλο στοιχείο της σελίδας;

Valeriu
56173
Επεξεργασμένη ερώτηση Κάνε Ιούλιος 2022 в 7:13
Temani Afif
Επεξεργασμένη ερώτηση Κάνε Ιούλιος 2019 в 7:21
Προγραμματισμός
css css-filters background-image
Κάνε Νοέμβριος 2013 в 3:49
31 προβολές
Λύση

Δείτε αυτό το στυλό.

Θα πρέπει να χρησιμοποιήσετε δύο διαφορετικά κοντέινερ, ένα για την εικόνα φόντου και ένα για το περιεχόμενό σας.

Στο παράδειγμα, έχω δημιουργήσει δύο δοχεία, το .background-image και το .content.

Και τα δύο έχουν τοποθετηθεί με position: fixed και left: 0; right: 0;. Η διαφορά στην εμφάνισή τους προέρχεται από τις τιμές του z-index που έχουν οριστεί διαφορετικά για τα στοιχεία.

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  width: 1200px;
  height: 800px;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}
<div class="background-image"></div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
    rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
    quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
  <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum
    tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>

Συγγνώμη για το κείμενο Lorem Ipsum.

Ενημέρωση

Ευχαριστώ τον Matthew Wilcoxson για μια καλύτερη υλοποίηση με τη χρήση του .content:before http://codepen.io/akademy/pen/FlkzB

Valeriu
56173
Επεξεργασμένη απάντηση Κάνε Ιούλιος 2022 в 7:14
ths
Επεξεργασμένη απάντηση Κάνε Ιούλιος 2019 в 4:09
Σχόλια (17)

στυλό

Κατάργηση της ανάγκης για ένα επιπλέον στοιχείο, μαζί με την προσαρμογή του περιεχομένου στη ροή του εγγράφου αντί να είναι σταθερό/απόλυτο όπως άλλες λύσεις.

Επιτυγχάνεται με τη χρήση

.content {
  overflow: auto;
  position: relative;
}

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

Μετά από αυτό χρειάζεστε απλά

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

EDIT Αν σας ενδιαφέρει να αφαιρέσετε τα λευκά περιθώρια στις άκρες, χρησιμοποιήστε πλάτος και ύψος 110% και αριστερά και πάνω -5%. Αυτό θα μεγεθύνει λίγο τα φόντα σας - αλλά δεν θα πρέπει να υπάρχει συμπαγές χρώμα που να αιμορραγεί από τις άκρες.

Ενημερωμένη πένα εδώ: https://codepen.io/anon/pen/QgyewB - Ευχαριστώ τον Chad Fawcett για την πρόταση.

Valeriu
56173
Επεξεργασμένη απάντηση Κάνε Ιούλιος 2022 в 7:14
Necrone
Επεξεργασμένη απάντηση Κάνε Σεπτέμβριος 2017 в 6:32
Σχόλια (3)

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

Peter Mortensen
Επεξεργασμένη απάντηση Κάνε Νοέμβριος 2014 в 11:49
Σχόλια (0)

Στην καρτέλα .content στο CSS αλλάξτε το σε position:absolute. Διαφορετικά, η σελίδα που εμφανίζεται δεν θα μπορεί να μετακινηθεί.

Webruster
Επεξεργασμένη απάντηση Κάνε Σεπτέμβριος 2015 в 12:50
Σχόλια (0)