博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于兼容IEn这个不得不提及的话题。。。。
阅读量:5253 次
发布时间:2019-06-14

本文共 1549 字,大约阅读时间需要 5 分钟。

敲黑板 ~直入主题!!!

1-关于背景(bg)

···为兼容ie背景要平铺

HTML

  <!doctype html>
<html>
<body>
    ...Your content goes here...
</body>
</html>
  给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。
  其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。
  CSS body标签的样式如下:
  body {
/* 加载背景图 */
background-image: url(images/background-photo.jpg);
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #464646;
}
  上面最重要的一条就是:
  background-size: cover;
  这样浏览器就会按比例缩放背景图直至背景图宽高不小于容器的宽高(在上面的例子中,就是body标签)。
  这里需要注意的一点就是:如果背景图小于body标签的尺寸(例如在高分辨率显示器上,或页面内容特别多时),浏览器会拉伸图片。都知道,当把一个图片拉伸时,图片会变模糊。
  因此,在选择背景图时,要特别注意尺寸。为了照顾到大尺寸屏幕,demo里用的图片尺寸为5498px * 3615px 。
  同时,为了让背景图始终相对于viewport居中,声明了:
  background-position: center center;
  上面的规则会把背景图缩放的原点定位到viewport的中心。
  接下来需要解决的问题是:当内容的高度大于viewport的高度时,会出现滚动条。希望背景图始终相对于viewport固定,即使用户滚动时也是一样。
  解决办法就是:
  background-attachment: fixed;

 

 

emmmmm…….最后还有一句 宽高真心要定死~~~定的死死的

最后再把滚条干掉就完美了~

应该是酱紫吧 要是有什么不妥留言即可!

上面都是我百度⑧下来的一些bg属性的设置 啊哈哈  基础要搞好啊2333

2-再来说一个关于背景透明的兼容性处理~

大家都造在IE浏览器上 它并不识别各种透明属性设置!

关于rgba的属性 最简单的方法就是过滤器~!

且看代码:

                background:rgba(255,255,255,.3);
                filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#44ffffff,endColorstr=#44ffffff);
没错 这两句很重要~
下面的url引入的是一个可以兼容IE的文件
目前没怎么感觉到他的重要性
不过他就是一个IE浏览器能够识别的语言 就像北京人说北京话 河南人说河南话 上海人说上海话一样的道理。。
额。。。没有上传附件的功能啊~随后会把我的GitHub地址放到留言区  有需要的朋友可以直接带走~

转载于:https://www.cnblogs.com/yuanguliang/p/8617043.html

你可能感兴趣的文章
redis cli命令
查看>>
Problem B: 占点游戏
查看>>
python常用模块之sys, os, random
查看>>
HDU 2548 A strange lift
查看>>
Linux服务器在外地,如何用eclipse连接hdfs
查看>>
react双组件传值和传参
查看>>
[Kaggle] Sentiment Analysis on Movie Reviews
查看>>
价值观
查看>>
mongodb命令----批量更改文档字段名
查看>>
CentOS 简单命令
查看>>
使用&nbsp;SharedPreferences 分类: Andro...
查看>>
TLA+(待续...)
查看>>
题解: [GXOI/GZOI2019]与或和
查看>>
MacOS copy图标shell脚本
查看>>
国外常见互联网盈利创新模式
查看>>
Oracle-05
查看>>
linux grep 搜索查找
查看>>
Not enough free disk space on disk '/boot'(转载)
查看>>
android 签名
查看>>
vue项目中使用百度统计
查看>>