Question

我有页面我使用以下代码将背景图像设置为

<body class="homeBg">

其中css看起来像

.homeBg
{
    background:url(../images/home-bg.jpg) no-repeat scroll center top;
    background-size: cover;
    background-attachment: fixed;
}

如果您使用移动设备，这会导致网站加载缓慢，任何想法如何增强，

Answer 1

我认为putvande的意思是图像在字节大小方面太大（如超过4000像素宽或某些东西）和/或分辨率可能超过72 dpi。您应该谷歌如何优化图像和了解字节。

如果您在移动设备上使用较小图片的媒体查询。例如：

.homeBg
{
    background:url(../images/home-bg.jpg) no-repeat scroll center top;
}

 @media screen and (max-width: 1000px) {
 .homeBg
   {background:url(../images/home-bg-1000px.jpg) no-repeat scroll center top;}
 }


 @media screen and (max-width: 480px) {
 .homeBg
    {background:url(../images/home-bg-for-mobile-size.jpg) no-repeat scroll center top; }
 }

设置背景图像导致重页加载

1 个答案: