敲黑板 ~直入主题!!!
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的属性 最简单的方法就是过滤器~!
且看代码: