Question

我想在我的网站上添加一个破旧的旧页面背景图片。它具有不均匀的边缘，不均匀的边缘具有阴影。这是the image。现在我如何才能最好地将其添加为我的背景图片，因为此刻几乎是1毫克！我试图在Photoshop中减少它，但是它具有透明度，似乎很少我可以用这个png。

我还考虑过嵌套div，所以我做了这个结构：

 <div id="page-top">
        <div id="page-left">
            <div id="page-right">
                <div id="page-bottom">
                    <div id="page-content">

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

然后我将我的图像切片并用css来设计它。但是当我希望它在父母的bg图像之后开始，而不是覆盖它本身时，页面忽略了父div，只是覆盖了它的父母的背景图像。它没有注意父母的div高度。

这是screenshot我的页面看起来如何使用我的身体bg img草应用（以防万一你想知道它来自哪里！）。

这是css

body{
background:url('../images/bg1.jpg') repeat-x top left;
}

#page-top{
width:100%;    
background:url('../images/pagebgTOP.png') no-repeat top left;

}

#page-left{
background:url('../images/pagebgLEFT.png') no-repeat top left;
height:640px;
margin-top:20px;
}

#page-content{
width:100%;
 background:url('../images/pageBG.png') repeat top left;
}

您认为最好的方法是做什么？请记住，我需要能够在图像的实际边缘上设置投影，而不是图像的边界框。 PLus，它需要更小。

Answer 1

这是一个有趣的问题，因为我相信答案远比简单的CSS技巧更深刻。你真的需要那张照片作为背景图片吗？将90年代后期的网站与今天的网站进行比较 - 巨大的光点图像带有阴影，需要代码黑客才能实现，只会降低网站速度并使用户分散注意力内容，希望你希望用户查看什么，对吧？

至于处理背景图片的大小，您肯定希望利用图像压缩工具。到目前为止，我最喜欢的是雅虎的smush.it。不幸的是，对于你的特定图像，它是一个透明的PNG，所以你很难得到它＆lt; 1mb，但没有减少图形的尺寸。如果你只是给它一个白色背景并将其保存为JPEG，你可以大大减小尺寸 - smush.it将JPEG降低到50k。

我建议访问像http://www.templatemonster.com这样的网站，以了解当前普遍接受的网页设计趋势，并了解他们使用什么样的CSS技巧来完成设计实施。

我无法全心全意地帮助您使用撕裂的边缘和阴影来实现背景图像，但希望我能帮助您找到更好的解决方案，这将有助于您显着优秀在网页设计中。

Answer 2

在Photoshop中，转到文件 - ＆gt; Save for Web＆amp;设备。如果将其保存为JPEG并选中“逐行”，则会以分辨率为单位加载照片。这意味着用户将首先看到低分辨率版本，然后分辨率将随着加载而增加。

另一个选择是使用JavaScript让图像淡入。这不会缩短加载时间，但它看起来不会突然爆发而不是在它准备就绪时弹出。

//page fade in
$(function () {
    var img = new Image();
    $(img).load(function () {
            $("#loaded").fadeIn();
            $("#loader").removeClass('loading');
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr('src', '../picturename.jpg');
});

Answer 3

将此图片分成不同的图片。

Jpeg与里面。它可以非常有效地压缩 - 试验压缩，你可以降到60甚至50，结果令人满意。
png只有不均匀的部分和阴影，中间是透明的矩形。

将png设置为外包装的背景，将jpg设置为内部。

额外的HTTP请求非常值得您保存的图像大小。更进一步 - 如果你对Photoshop很好，你可以尝试为内部制作无缝瓷砖，但这并不容易。

用css显示背景图像的有效方法

3 个答案: