0

终极目标：制作一个成型的透明度，图像可以通过它显示，但由形式本身塑造。图像是翻转按钮，通过悬停从灰度变为彩色

所以下面的图片（链接）显示了我想在 Dreamweaver CS6 中发生的事情。我使用 PS 制作了这张图片。我只是把“人物部分”删除了，所以图片变成了一个白色的盒子，里面是透明的。我的计划是简单地将这个图像植入 DW，然后通过放置 IMG 标签将其余的彩色图像放在它下面。

我想它会像你在下面看到的那样，但事实并非如此。我只是得到一个完整的白页（离线测试，未上传到服务器）。如果我添加图片，则没有任何迹象表明具有透明度的 PNG 甚至存在。

那么现在，您的建议是什么？只使用 FW 并制作如下所示的工作切片会更容易吗？在那种情况下，我只需要在 DW 中工作时像俄罗斯方块一样匹配身体的所有部分。似乎有一种更简单的方法可以做到这一点，但不知何故我让它变得非常困难。

请询问您是否需要更多信息。太感谢了。

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

4

1 回答 1

0

您可以将轮廓保存为具有 alpha 透明度的 .PNG。要获得具有翻转效果的单独图像，您可以尝试以下操作。（不使用任何画布技巧）。创建一个两倍于您想要的条带高度的图像，将黑白版本放在上半部分，将相同图像的彩色版本放在下半部分。

如果您无法看到白色轮廓，您可以尝试将页面背景暂时设置为黑色。

要仔细检查您是否正确链接到图像文件，您还可以尝试在 chrome 中按 f12 并查看 Frames > Images 中的 Resources 选项卡。

.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>
于 2013-03-17T04:26:22.150 回答