没啥可说的,直接上代码。
通常给页面设置全屏背景时会这样写:
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。如下图
效果图
将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"); }
效果图
属性 | 解释 |
---|---|
src | 图片路径,可以是相对,也可以是绝对 |
sizingmethod | 可选值,设置或检索的方式来显示一个图像在对象边界显示方式。有三个值:crop裁剪图像以适应对象的尺寸;image,默认值,扩大或减少对象的边界,以适应图像的尺寸;scale,伸展或收缩图像填充对象的边界; |
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论