嘗試使用Png文件進行背景包裝時的格式化問題

希望有人能幫助我，因爲我對整個網頁設計還很陌生。我正在使用CSS創建一個容器包裝。正如你從代碼中看到的，我有一個底部，頂部和中心圖像。當我使用JPEG圖像時，所有東西都排列正確，但是我需要切換到PNG圖像文件（以利用透明度），現在封套的頂部和底部都被抵消了。嘗試使用Png文件進行背景包裝時的格式化問題

* *這裏是一個活鏈接：storrepictures.weebly.com/projects.html

- 請找到導致問題在這裏的形象：http://i.imgur.com/YnTS8.png
- 這是它的外觀，當我使用JPEG文件，而不是PNG圖像：http://i.imgur.com/2WMFN.png

這裏是我的CSS代碼：

#wrapper { 
    background: url(containerbg.png) center repeat-y; 
    } 

#wrappertop{ 
    background: url(containertop.png) top center no-repeat; 
} 

#wrappertbtm{ 
    background: url(containerbtm.png) bottom center no-repeat; 
    padding-bottom: 65px; 
}

這裏是HTML FIL的主體部分e：

<div id="wrapper"> 
    <div id="wrappertop"> 
     <div id="wrappertbtm"> 
     <div id="container"> 

     <div id="header"> 
      <div id="headerleft">{logo max-height="60"}</div> 
      <div id="navigation">{menu}</div>   
     </div>  

     <div id="content">{content} 
      <div id="footer">{footer} 

      </div> 
      </div> 
      </div> 
      </div> 
      </div> 
</div> 
</div>

來源

2012-03-22 dq7133

向我們展示一個可重複的例子（您的代碼和圖像完整？）。只是改變背景圖片不會改變結構。可能你的PNG與JPG相比是不對齊/不同的。 – Qtax 2012-03-22 05:16:55

Live link：storrepictures.weebly.com/projects.html – dq7133 2012-03-23 21:04:59

檢查高度加上jpeg和png的寬度.. 可能都是不同的。我不知道，但我認爲你可以通過給他們相同的高度和寬度來解決你的問題。

來源

2012-03-22 05:31:24

感謝您的快速回復。以下是該網站的鏈接：http://storrepictures.weebly.com/projects.html – dq7133 2012-03-23 04:29:33

我認爲你的PNG圖像沒有正確切片檢查它的確切寬度&高度。雖然他們是PNG或JPEG，他們會在他們的確切位置，如果他們切片正確，所以問題在不透明的問題可能是不正確的圖像切片...

如果你會給我們現場演示比我們將能夠深入地看到確切的錯誤..

來源

2012-03-22 09:12:18

感謝您的快速回復。以下是該網站的鏈接：http：//storrepictures.weebly.com/projects.html。 PNG文件的尺寸與JPEG文件相同，所以我不確定問題可能是什麼。有沒有特殊的方法來保存PNG文件？ – dq7133 2012-03-23 04:30:31

嘗試使用Png文件進行背景包裝時的格式化問題

回答

相關問題