Μπορώ να δω στις αναφορές CSS πώς να ορίσετε τη διαφάνεια της εικόνας και πώς να ορίσετε μια εικόνα φόντου. Πώς μπορώ όμως να συνδυάσω αυτά τα δύο προκειμένου να ορίσω μια διαφανή εικόνα φόντου;
Έχω μια εικόνα που θα ήθελα να χρησιμοποιήσω ως φόντο, αλλά είναι πολύ φωτεινή - θα ήθελα να μειώσω την αδιαφάνεια σε περίπου 0,2. Πώς μπορώ να το κάνω αυτό;
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}
#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;
}
Δύο μέθοδοι:
<div>
που είναι position: absolute;
πριν από το #main
και το ίδιο ύψος με το #main
, στη συνέχεια εφαρμόστε την εικόνα φόντου και opacity: 0.2; filter: alpha(opacity=20);
.Λοιπόν, ο μόνος τρόπος CSS για να κάνετε μόνο διαφάνεια φόντου είναι μέσω του RGBa
, αλλά αφού θέλετε να χρησιμοποιήσετε μια εικόνα, θα πρότεινα να χρησιμοποιήσετε το Photoshop ή το Gimp για να κάνετε την εικόνα διαφανή και στη συνέχεια να τη χρησιμοποιήσετε ως φόντο.