Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2001
    Messaggi
    29

    Foto opaca su sfondo trasparente.. come?

    Salve a tutti,
    ho letto le precedenti discussioni ma non sono riuscito a trovare la soluzione al mio problema, ve lo illistro:
    Premetto che sono un grafico pubblicitario classico (carta e supporti tangibili), conosco le regole base del web ma non mi ci muovo volentieri..
    Sto cercando di mettere su un sito con Joomla e ce l'ho quasi fatta, ma ho un problema,
    Il template di partenza é il Larrens2, poi ho aggiustato un po' il CSS..
    Mi piaceva l'idea che il div del contenuto principale avesse gli angoli rotondi ed il fondo leggermente trasparente e ci sono riuscito, sui vede perfettoa anche in IE9.. se negli altri IE non si vede come dovrebbe, non importa oramai é minoranza e potrebbero pure aggiornare .. solo che mi succede il seguente problema:

    http://www.canerdeli.es/index.php/cafeteria/mechadas

    Come vedete il CSS rende trasparente TUTTO IL CONTENUTO del div, comprese le foto.. e quindi anche il testo ma quello non si nota xché é gia abbastanza scuro di suo.

    Come faccio ad escludere le foto dall'azione del CSS sul div dei contenuti?

    Ho trovato questo tutorial:
    http://css-tricks.com/384-non-transp...rent-elements/

    Che spiega come fare nel caso di un pesto specifico.. ma come lo faccio io su tutte le immagini del sito?

    Dall'editor di Joomla nelle opzioni avanzate di ogni immagine io posso definire una "stylesheet class", che penso sia il mio "ontop" di cui ho bisogno... ho fatto una prova ed a una foto ho dato tale attributo.. come lo richiamo adesso da CSS e gli dico "opacity: 1"?
    Poi non ho capito l'esempio del posizionamento.. xché devo riposizionare la foto?

    Devo modificare anche l'html della pagina index.php?

    Grazie ancora se vorrete darmi una mano ad uscire da questo fango dove sono entrato.
    DigiART
    DigiArt

  2. #2
    Moderatrice di CSS L'avatar di ResianTaxidrive
    Registrato dal
    Oct 2007
    residenza
    Udine
    Messaggi
    2,766
    sì è normale che i figli di un elemento che ha opacità minore di 1, diventino pure loro semi trasparenti. Per risolvere devi far sì che i figli non siano più tali quindi ad esempio affinchè la foto non sia trasparente non deve stare nel contenitore #main che è quello che ha l'opacità. Deve stare fuori, dopo aver chiuso il tag del div #main. Ovviamente, dal punto di vista visivo starà sotto #main ed è per questo motivo che all'immagine devi dare un qualche posizionamento per far sì che visivamente stia nella posizione in cui è adesso (devi quindi "tirarlo su", se mi consenti l'espressione)
    Ho iniziato a risponderti e solo dopo ho guardato il codice...la parte centrale è tutta a tabelle...ORRORE!

    Questo è il codice corrispondente al titolo Carne Mechada

    codice:
    <table class="contentpaneopen">
    <tbody><tr>
    		<td width="100%" class="contentheading"><cufon class="cufon cufon-canvas" alt="Carne " style="width: 67px; height: 22px;"><canvas width="83" height="22" style="width: 83px; height: 22px; top: 1px; left: -1px;"></canvas><cufontext>Carne </cufontext></cufon><cufon class="cufon cufon-canvas" alt="Mechada" style="width: 94px; height: 22px;"><canvas width="103" height="22" style="width: 103px; height: 22px; top: 1px; left: -1px;"></canvas><cufontext>Mechada</cufontext></cufon></td>
    				
    		
    					</tr>
    </tbody></table>
    Perchè c'è il css in linea? Perchè ti serve una tabella? Così a occhio mi dà l'idea che ci siano anche un sacco di classi e tag ridondanti (quanti cufon??)
    E' codice tuo o del template?
    Direi decisamente di sfrondare.

    Tornando al problema principale, se quella è la tua pagina e sai che non avrà lunghezza maggiore, devi fare un div #main (che a questo punto sarà vuoto) a cui assegnerai una altezza e una larghezza e una opacità. Poi tutti gli altri elementi staranno fuori da questo #main e verranno posizionati con ad esempio un margin-top negativo o con un posizionamento relativo.

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2006
    Messaggi
    526
    Soluzione molto più semplice: imposta il background non con la classica proprietà RGB() ma con la nuova rgba(), che accetta 4 valori di cui l'ultimo è il canale alpha, ovvero l'opacità! (l'ho spiegato anche in thread di qualche giorno fa). Questa proprietà è specifica dei CSS3 ma non si propaga ai figli come invece fa opacity

  4. #4
    Utente di HTML.it
    Registrato dal
    Feb 2001
    Messaggi
    29
    Sei un grandissimo, grazie.. sapevo che doveva esserci una soluzione semplice...

    Ciaoo
    DigiART
    DigiArt

  5. #5
    Utente di HTML.it
    Registrato dal
    Jan 2006
    Messaggi
    526
    Ricordati solo che su IE (sicuramente fino all'8, sul 9 non so....) non è compatibile rgba! Ma te l'ho segnalato comunque perché prima avevi accennato al fatto che già per altri aspetti non ti interessava la retrocompatibilità al 100%.

  6. #6
    Utente di HTML.it
    Registrato dal
    Feb 2001
    Messaggi
    29
    Provato, sul 9 funziona ottimamente... problema risolto.. grazie.
    DigiArt

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.