Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2003
    Messaggi
    393

    immagine con sopra immagine "bucata"

    Non so se si può fare con i CSS...

    in alcuni siti ho visto che sopra alcune immagini (magari di un articolo "primo piano") c'è una sorta di "maschera" sopra l'immagine, sempre uguale per tutti i primi piani.

    Presumo che ci sia un sistema per fare in modo che si uploada un'immagine semplice e poi tramite html/css viene applicata una maschera sopra.

    A volte l'ho visto fare anche con bollini di garanzia, tipo: "foto approvata". Dubito che ogni immagine la prendano, la importino in photoshop, ci applichino il bollino e la riuploadino.

    Avete idea di come si possa fare?

    Grazie

  2. #2
    Personalmente io faccio così:

    1 Rendo trasparente, in formato png, l'iimagine da applicare come mascherina.

    2 creo due livelli con zindex, con css. Nel livello più superficiale metto la maschera, in quello sotto metto il resto. il codice risulta così:

    codice:
    <head>
    bla bla bla
    <style type="text/css">
    #maschera {margin-left: *metti il valore che ti serve*;
                       margin-top:  *metti il valore che ti serve*;
                       z-index: 2;}
    #img_sotto {margin-left: *metti il valore che ti serve*;
                       margin-top:  *metti il valore che ti serve*;
                       z-index: 1;}
    </head>
    <body>
    <div id="main">
      <div id="img_sotto">
         [img]*percorso*[/img]
      </div>
      <div id="maschera">
         [img]*percorso*[/img]
      </div>
    </div>
    
    </body>
    Ricorda di selezionare il tipo di position (absolute per #maschera e #img_sotto, relative per #main, a mio avviso). E ricorda anche che se hai un'immagine mappata o dei link che vengono coperti dall'immagine maschera, anche se nei "buchi" di essa, non funzionano perch coperti.

    Detto questo sono un novellino, quindi aspetta ulteriori conferme da webmaster più esperti di me.

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.