Comment empiler des éléments transparents dans Dreamweaver CS6

Question

BUT ULTIME: Créez une transparence formée à l'endroit où les images peuvent apparaître mais sont façonnées par la forme elle-même. Les images sont des boutons de survol et passent de l'échelle de gris à la couleur avec le pointeur

L'image ci-dessous (lien) montre ce que je veux faire dans Dreamweaver CS6. J'ai utilisé PS pour créer cette image. J'ai simplement pris la "partie de personne" et l'ai supprimée ainsi l'image s'est avérée comme une boîte blanche avec un intérieur transparent. Mon plan consistait simplement à planter cette image dans DW, puis à placer le reste des images couleur en dessous en plaçant l'étiquette IMG. Je pensais que ce serait comme ce que vous voyez ci-dessous mais ce n'est pas le cas. Je reçois simplement une page blanche complète (testée hors ligne, non téléchargée sur le serveur). Si j'ajoute une image, il n'y a aucune indication que le PNG avec la transparence existe même.

Alors maintenant, quelles seraient vos suggestions? Serait-il plus facile d'utiliser FW et de faire des tranches de travail comme indiqué ci-dessous? Dans ce cas, je devrais juste faire correspondre tous les morceaux du corps comme Tetris lorsque je travaille dans DW. Il semble juste qu'il y ait une manière beaucoup plus facile de faire ceci et d'une manière ou d'une autre je le rend extrêmement dur.

Veuillez demander si vous avez besoin de plus d'informations. Merci beaucoup.

http://i1195.photobucket.com/albums/aa400/SteffaneTimm/MeFirstSuccess_zps146c6716.jpg

Answer 1

Vous pouvez enregistrer le contour en .PNG avec transparence alpha que vous avez. Pour obtenir les images séparées avec l'effet de renversement, vous pouvez essayer quelque chose comme ci-dessous. (n'utilisant aucune tricherie de toile). Créer une image qui est le double de la hauteur de la bande que vous voulez, mettre la version en noir et blanc dans la moitié supérieure, et la version couleur de la même image dans la moitié inférieure.

Si vous avez des difficultés à voir le contour blanc, vous pouvez essayer de définir temporairement l'arrière-plan de la page sur noir.

Pour vérifier que vous avez correctement lié vos fichiers image, vous pouvez également essayer d'appuyer sur f12 en chrome et en regardant l'onglet Ressources dans Images> Images.

.container { 
width: 500px; height: 800px; 
} 

.image-strip { 
height: 200px; width: 500px; float: left; 
overflow: hidden; 
} 

.image-strip img:hover { 
margin-top: -200px; 
} 

.woman-outline { 
position: relative; top: 0px; left: 0px; 
height: 800px; width: 500px; 
background: url('woman.png') no-repeat; 
z-index: 1000; 
} 


<div id="container"> 

    <div class="image-strip"><img src="1.jpg" /></div> 
    <div class="image-strip"><img src="2.jpg" /></div> 
    <div class="image-strip"><img src="3.jpg" /></div> 
    <div class="image-strip"><img src="4.jpg" /></div> 

    <div id="woman-outline"></div> 

</div>