Μπορώ να ορίσω την εικόνα φόντου και την αδιαφάνεια στην ίδια ιδιότητα;

Μπορώ να δω στις αναφορές CSS πώς να ορίσετε τη διαφάνεια της εικόνας και πώς να ορίσετε μια εικόνα φόντου. Πώς μπορώ όμως να συνδυάσω αυτά τα δύο προκειμένου να ορίσω μια διαφανή εικόνα φόντου;

Έχω μια εικόνα που θα ήθελα να χρησιμοποιήσω ως φόντο, αλλά είναι πολύ φωτεινή - θα ήθελα να μειώσω την αδιαφάνεια σε περίπου 0,2. Πώς μπορώ να το κάνω αυτό;

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}
TylerH
Επεξεργασμένη ερώτηση Κάνε Ιανουάριος 2019 в 8:11
Προγραμματισμός
css
Κάνε Νοέμβριος 2010 в 11:37
1 προβολή
#main {
    position: relative;
}
#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}
Nisse Engström
Επεξεργασμένη απάντηση Κάνε Σεπτέμβριος 2018 в 10:01
Σχόλια (11)
Λύση

Δύο μέθοδοι:

  1. Μετατροπή σε PNG και αδιαφάνεια 0,2 της αρχικής εικόνας.
  2. (Καλύτερη μέθοδος) έχετε ένα <div> που είναι position: absolute; πριν από το #main και το ίδιο ύψος με το #main, στη συνέχεια εφαρμόστε την εικόνα φόντου και opacity: 0.2; filter: alpha(opacity=20);.
TylerH
Επεξεργασμένη απάντηση Κάνε Σεπτέμβριος 2014 в 2:54
Σχόλια (4)

Λοιπόν, ο μόνος τρόπος CSS για να κάνετε μόνο διαφάνεια φόντου είναι μέσω του RGBa, αλλά αφού θέλετε να χρησιμοποιήσετε μια εικόνα, θα πρότεινα να χρησιμοποιήσετε το Photoshop ή το Gimp για να κάνετε την εικόνα διαφανή και στη συνέχεια να τη χρησιμοποιήσετε ως φόντο.

Σχόλια (2)