欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ie8下兼容background-sizing方案教程

程序员文章站 2022-06-27 14:57:19
没啥可说的,直接上代码。 通常给页面设置全屏背景时会这样写: html, body { width: 100%; height: 100%; } bod...

没啥可说的,直接上代码。

通常给页面设置全屏背景时会这样写:

html, body {
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  background: url("./images/bg.png");
  -webkit-background-size: cover;
  background-size: cover;
}

but,background-sizing不兼容ie8。如下图

效果图

ie8下兼容background-sizing方案教程

解决方案

将body的样式增加一行代码:

body {
  overflow: hidden;
  background: url("./images/bg.png");
  -webkit-background-size: cover;
  background-size: cover;
  /* ie8 实现全屏背景 */
  filter: progid:dximagetransform.microsoft.alphaimageloader(src="./images/bg.png", sizingmethod="scale");
}

效果图

ie8下兼容background-sizing方案教程

参数解释

属性 解释
src 图片路径,可以是相对,也可以是绝对
sizingmethod 可选值,设置或检索的方式来显示一个图像在对象边界显示方式。有三个值:crop裁剪图像以适应对象的尺寸;image,默认值,扩大或减少对象的边界,以适应图像的尺寸;scale,伸展或收缩图像填充对象的边界;