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。如下图
效果图
解决方案
将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,伸展或收缩图像填充对象的边界; |
上一篇: 用户网站被黑,您的服务器是否安全?
推荐阅读
-
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
-
完美解决IE8下不兼容rgba()的问题
-
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
-
Windows 64位下装安装Oracle 11g,PLSQL Developer的配置问题,数据库显示空白的完美解决方案(图文教程)
-
完美解决IE8下不兼容rgba()的问题
-
ubuntu下Android开发环境的搭建:eclipse+SDK详细安装教程+常见问题及其解决方案
-
ie8下兼容background-sizing方案教程
-
vue兼容IE8以上解决方案
-
input输入框的border-radius属性在IE8下的完美兼容_html/css_WEB-ITnose
-
PHP没有数据库连接池怎么破?PHP环境下使用Nginx ngx_http_limit_req_module模块的高负载解决方案_PHP教程