css - 尝试将 Png 文件用于背景包装时出现格式问题

Question

希望有人能帮助我，因为我对整个网页设计仍然很陌生。我正在使用 CSS 创建容器包装器。正如您从代码中看到的那样，我有底部、顶部和中心图像。当我使用 JPEG 图像时，一切都正确排列，但是我需要切换到 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 文件的正文部分:

<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>

Answer 1

检查高度添加 jpeg 和 png 的宽度.. 可能两者不同。 我不确定，但我认为你可以通过给它们相同的高度和宽度来解决你的问题。