极客观点
项目管理
HarmonyOS
body {
background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed;
background-size:100% auto;
}
我在每个网站上都有不同的背景图片，因为它们是 1080p，所以需要一点时间来加载。
我使用带有 minamaze 主题的 wordpress 4.0.5。
我发现我使用了预加载 javascript 函数，但就我而言，在首页上我没有关于其他网站背景图片的信息，因此我希望有人可以为我提供不同的解决方案。
我的图像是大约 1mb 大小的 .png，也许我也可以尝试将它们压缩得更多一些？
提前致谢
原文由 Jakob Abfalter 发布，翻译遵循 CC BY-SA 4.0 许可协议
如果你使用 CSS3 背景渐变而不是大背景图像，你可以大大减少你的网站加载时间。以您的主页背景图像为例，您可以像这样创建一个背景=渐变，并将女士的图像用作背景图像并将其放置在右侧：
#content {
display: block;
height: 1500px;
}
body {
background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -webkit-linear-gradient(left, #ba53a0, #fff);
background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -o-linear-gradient(right, #ba53a0, #fff);
background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -moz-linear-gradient(right, #ba53a0, #fff);
background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, linear-gradient(to right, #ba53a0, #fff);
}
<body>
<div id="content"></div>
</body>
原文由 Fahad Hasan 发布，翻译遵循 CC BY-SA 3.0 许可协议
13 回答12.8k 阅读
7 回答2k 阅读
3 回答1.1k 阅读✓ 已解决
2 回答1.2k 阅读✓ 已解决
2 回答875 阅读✓ 已解决
6 回答922 阅读✓ 已解决
4 回答986 阅读✓ 已解决
您不应将 .png 用于此类图像。作为一般规则，照片应为 .jpg，图形（例如徽标）应为 .png
我将文件大小从 1.3MB 减少了约 93% 至 89KB，视觉差异几乎不明显。
这是优化后的图像： 优化
这是你的： 原创