图片

CSS中的图片

为元素使用复杂的图片时,CSS样式中的`background`属性十分强大,能让图片重复甚至更多。当该属性与media queries联合使用时,能基于屏幕分辨率、展示区大小或者其他为设备加载最合适的图片。

关键要点

  • 由展示特性选择最恰当的图片,考虑因素有屏幕大小,设备分辨率以及页面布局。
  • 依据设备查询min-resolution最小分辨率以及-webkit-min-device-pixel-ratiowebkit内核设备分辨率属性改变CSS中的background-image属性展示高分辨率视图。
  • 使用srcset属性为1x标记图像提供高分辨率图像。
  • 当使用Javascript图像替换技术或者将高分辨率图像高压缩成低分辨率图像适应设备时,要考虑到表现上的损耗。

使用media queries来加载条件响应的图片或者艺术指导。

Media queries(设备查询)不仅仅影响页面布局,也用来根据视窗宽度对应加载图片,或者提供艺术指导。

用以下的示例进行说明, 在较小的屏幕上,只有small.png会被加载放入到div元素中, 在较大的屏幕上时, background-image: url(body.png)会被加载到body元素上并且background-image: url(large.png)被加载到内容div元素中。

    .example {
      height: 400px;
      background-image: url(small.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position-x: center;
    }

    @media (min-width: 500px) {
      body {
        background-image: url(body.png);
      }
      .example {
        background-image: url(large.png);
      }
    }
    
查看完整示例

使用image-set提供高分辨率图片

在CSS样式中使用image-set()提高background属性的表现能力, 让不同的设备特性选择不同的图片变得更加容易。这允许浏览器根据设备特性选择最佳图片,例如在2x的展示区使用2x的图片,或者在一个带宽受限的2x的设备上使用1x的图片。

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

加载合适的图片后,浏览器将图片进行相应的缩放。换句话说,浏览器假定2x的图片有两倍的1x的图片尺寸,并将2x的图片以2作为基数进行等比例缩小,这样图片就能在页面上等大呈现。

浏览器对image-set()的支持仍处于发展中,现在只有以-webkit作为渲染内核的Chrome浏览器和Safari浏览器对该属性进行支持。 我们必须考虑当浏览器无法支持image-set()属性时我们应该有备用的图片,举例说明:

    .sample {
      width: 128px;
      height: 128px;
      background-image: url(icon1x.png);
      background-image: -webkit-image-set(
        url(icon1x.png) 1x,
        url(icon2x.png) 2x
      );
      background-image: image-set(
        url(icon1x.png) 1x,
        url(icon2x.png) 2x
      );
    }
    
查看完整示例

以上将合适的资源加载到支持image-set的浏览器,否则以1x的大小进行内容加载。重点提示当浏览器对image-set()的支持比较低时,大多数的浏览器都将会加载1x的资源。

使用media queries提供高分辨率图片或者艺术指导

多媒体查询将基于设备像素比进行规则定义, 使将不同尺寸的图片进行1x或者2x展示变得更加容易。

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
  /* High dpi styles & resources here */
}

Chrome, Firefox以及Opera都支持 (min-resolution: 2dppx)标准, 但Safari以及Android 浏览器需要提供不带dppx前缀的旧式语法的代理。请记住这些样式只有当设备符合多媒体查询条件时才会得以展示,你必须写好基本样式。这样也能够保证当浏览器不支持多媒体查询分辨率特性时,一些内容仍然可以被渲染展示。

    .sample {
      width: 128px;
      height: 128px;
      background-image: url(icon1x.png);
    }

    @media (min-resolution: 2dppx), /* Standard syntax */
    (-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
    {
      .sample {
        background-size: contain;
        background-image: url(icon2x.png);
      }
    }
    
查看完整示例

你也可以根据展示区大小使用min-width来进行不同大小的图片。这项技术的好处在于,当多媒体查询不符合时图片不会被加载。举例来讲,只有在浏览器宽度在500像素以上时,图片文件bg.png才会被加载到body元素上。

@media (min-width: 500px) {
  body {
    background-image: url(bg.png);
  }
}

除非另有说明,本网页的内容采用知识共享署名3.0许可和代码示例都基于Apache2.0许可。如需详细资讯,请参阅我们的网站政策

回到顶部