如何在Dreamweaver CS6中堆疊透明項目

ULTIMATE GOAL：製作一個透明圖像可以顯示但透過窗體本身形成的透明圖像。圖像是翻轉按鈕，並從灰度變成彩色與懸停如何在Dreamweaver CS6中堆疊透明項目

所以下面的圖片（鏈接）顯示了我想在Dreamweaver CS6中發生的事情。我用PS來創建這個圖像。我只是把「人物部分」刪除了，所以圖片變成了一個透明的白色盒子。我的計劃是簡單地將該圖像植入DW中，然後通過放置IMG標籤將剩餘的彩色圖像放在其下面。

我想它會變成像你看到的下面，但它沒有。我只是得到一個完整的白頁（離線測試，沒有上傳到服務器）。如果我添加圖片，則沒有暗示具有透明度的PNG甚至是存在的。

那麼現在，你會有什麼建議？如下所示，僅使用FW並對工作進行切片會更容易嗎？在這種情況下，我只需要在DW中工作時將所有的身體部分比如俄羅斯方塊。這似乎有一個更簡單的方法來做到這一點，不知何故，我正在努力。

請詢問您是否需要更多信息。非常感謝。

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

來源

2013-03-17 Steffane Cheebs Timm

你可以大綱保存爲阿爾法透明度。PNG，你有。要獲得翻轉效果的單獨圖像，您可以嘗試下面的內容。（不使用任何畫布技巧）。創建一個圖像，使您想要的條的高度加倍，將黑白版放在上半部分，並在下半部分放置同一圖像的顏色版。

如果您在查看白色輪廓時遇到困難，可以嘗試將頁面背景臨時設置爲黑色。

要仔細檢查您是否已正確鏈接到圖像文件，您也可以嘗試在chrome中按f12並查看「幀」>「圖像」中的「資源」選項卡。

.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-17 04:26:22 dijkstra8x

非常好！感謝您的幫助。我確實讓所有的東西都起作用，並且實際上做了一個懸停淡出效果。現在我的問題是，當透明度下面 - 圖像可以看到，但不可點擊，懸停效果不起作用。如果我把它拉到透明度之外 - 它可以工作。所以我知道它本身並不是一個問題。在透明度下可以看到圖片但沒有點擊的任何原因？這裏是鏈接 - > http://webdesign.miad.edu/stimm/testsite/ –

如何在Dreamweaver CS6中堆疊透明項目

回答

相關問題