Swinrrr Δημοσ. 5 Ιουνίου 2012 Δημοσ. 5 Ιουνίου 2012 Ιδέα: Έστω έχουμε #any_container{ opacity:0.2; } , τα περιεχόμενα του any_container όλα παίρνουν την ίδια opacity ,πως να το κάνω έτσι ώστε να μην την παίρνουν .
Haldol Δημοσ. 5 Ιουνίου 2012 Δημοσ. 5 Ιουνίου 2012 Καλημέρα. Αυτό είναι γνωστό πρόβλημα με το opacity στο CSS. 1. Η "κλασσική" λύση είναι να τοποθετήσεις το child element με absolute positioning στο σημείο που θέλεις, ώστε να μην είναι "πραγματικό child" του element που θέλεις να έχει συγκεκριμένο opacity. 2. Η επόμενη λύση είναι να χρησιμοποιήσεις ένα semi-transparent PNG, το οποίο όμως προσθέτει ένα επιπλέον HTTP request (εκτός κι αν το "ρίξεις" μέσα στο CSS με base-64 encoding). 3. Τέλος, η πιο ενδεδειγμένη για εμένα λύση, είναι να καταφύγεις σε RGBa χρωματισμό. Μπορείς έτσι να ορίσεις χρώματα αλλά και alpha transparency για το element που θέλεις με ένα μόνο declaration, το οποίο και αφορά αποκλειστικά το χρώμα του element. Δεν πειράζει τα περιεχόμενά του (a.k.a. τα child elements). Προβλήματα στο τελευταίο; Ασυμβατότητα. Ενώ δουλεύει όπως πρέπει σε FF 3+, Safari 2+, Opera 10+ τη ζημιά μας την κάνει... ποιος άλλος; Ο IE. Τα RGBa χρώματα δεν αναγνωρίζονται ούτε καν από τον IE 8, οπότε θα πρέπει να προσθέσεις και ένα fallback σε solid χρώμα πριν από το RGBa ώστε να είσαι οκ και με τον τρισκατάρατο.
Swinrrr Δημοσ. 5 Ιουνίου 2012 Μέλος Δημοσ. 5 Ιουνίου 2012 Δεν πρόκειται ώμος μόνο για εικόνες tα stoixeia mesa sto conteiner διαφορετικού τύπου (inputs, divs ...) , υπάρχει μήπως κάποια εντολή που να αποτρέπει την opacity στα αυτά τα αντικείμενα ?
Haldol Δημοσ. 5 Ιουνίου 2012 Δημοσ. 5 Ιουνίου 2012 Δεν υπάρχει. Και να δηλώσεις opacity: 1.0; σε κάθε child element θα δεις ότι δε θα το "παίρνει", πάλι ημι-διάφανα θα δείχνουν τα περιεχόμενα του #any_container. Οι επιλογές σου είναι αυτά που σου έγραψα στο προηγούμενο post.
Haldol Δημοσ. 5 Ιουνίου 2012 Δημοσ. 5 Ιουνίου 2012 Είναι το 1. που σου έγραψα... Και έχει μειονεκτήματα: τα child elements δεν είναι child elements αλλά absolutely positioned άκυρα elements. Και προσθέτει και επιπλέον markup.
Swinrrr Δημοσ. 5 Ιουνίου 2012 Μέλος Δημοσ. 5 Ιουνίου 2012 Πως δεν είναι child element , δεν έχει καθόλου σημασία position , για τι αν είναι μέσα στο div any_container τότε είναι child έτσι και αλλιώς.
Haldol Δημοσ. 5 Ιουνίου 2012 Δημοσ. 5 Ιουνίου 2012 ΔΕΝ ΕΙΝΑΙ ΜΕΣΑ ΣΤΟ #ANY_CONTAINER! Στο είπα πόσες φορές. Με αυτή τη λύση "προσομοιώνεις" μια σχέση parent-child, χωρίς όμως τα δύο elements να έχουν πραγματικά τέτοια σχέση. Το ένα είναι δίπλα στο άλλο, όχι μέσα στο άλλο (που τότε το δεύτερο θα ήταν child του πρώτου). Απλά με CSS το κάνεις να φαίνεται ότι είναι το ένα μέσα στο άλλο, χωρίς να είναι πραγματικά.
Swinrrr Δημοσ. 5 Ιουνίου 2012 Μέλος Δημοσ. 5 Ιουνίου 2012 Εγω αυτο εχω : <html> <head> <style> #a_c{ width:200px; height:200px; background:#000; opacity:0.9; } </style> </head> <body> <div id="a_c" > <div style="width:100px;height:100px; background:#CCC"> hello world </div> </div> </body> </html>
Haldol Δημοσ. 5 Ιουνίου 2012 Δημοσ. 5 Ιουνίου 2012 Κάντο έτσι και θα σου δουλέψει: ><html> <head> <style> #a_c { width: 200px; height: 200px; background: #000; background: rgba(0, 0, 0, 0.90); } </style> </head> <body> <div id="a_c" > <div style="width:100px;height:100px; background:#CCC"> hello world </div> </div> </body> </html> Πάντως απ' ότι βλέπω απ' αυτά που έχεις γράψει έχεις πάρα πολλή δουλειά μπροστά σου.
thanocaster Δημοσ. 5 Ιουνίου 2012 Δημοσ. 5 Ιουνίου 2012 Swinrrr, καλό θα είναι, πριν συνεχίσεις, να ρίξεις μια ματιά στα floats και τη σημασία τους.
Swinrrr Δημοσ. 5 Ιουνίου 2012 Μέλος Δημοσ. 5 Ιουνίου 2012 Εντάξει ,αυτο το προβληματάκι δεν ειναι και κατι σπουδαίο αλλα αυτό ΔΕΣ ΤΟ με εχει προβληματίσει Στην Thanocaster. Κοριτσάρα μου μην με μάθεις ...
thanocaster Δημοσ. 5 Ιουνίου 2012 Δημοσ. 5 Ιουνίου 2012 Εντάξει ,αυτο το προβληματάκι δεν ειναι και κατι σπουδαίο αλλα αυτό ΔΕΣ ΤΟ με εχει προβληματίσει Στην Thanocaster. Κοριτσάρα μου μην με μάθεις ... ΤΙΠΟΙΟΣΠΟΥ???
Προτεινόμενες αναρτήσεις
Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε
Πρέπει να είστε μέλος για να αφήσετε σχόλιο
Δημιουργία λογαριασμού
Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!
Δημιουργία νέου λογαριασμούΣύνδεση
Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.
Συνδεθείτε τώρα