html+CSS让背景图片充满整个屏幕
2017-10-19 13:43
686 查看
由于给网页设置背景图时,需要设置背景图不重复且充满整个浏览器屏幕。
给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。
其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。
可设置body标签的CSS样式如下:
body{
/*加载背景图*/
background-image:url(./images/background.jpg);
/* 背景图垂直、水平均居中 */
background-position: center center; /* 背景图不平铺 */
background-repeat: no-repeat; /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */ background-attachment: fixed;//此条属性必须设置否则可能无效/ /* 让背景图基于容器大小伸缩 */ background-size: cover; /* 设置背景颜色,背景图加载过程中会显示背景色 */ background-color: #CCCCCC;
}
或简写为如下CSS样式:
body{
background:url(./images/background.jpg)no-repeat center center;
background-size:cover;
background-attachment:fixed;
background-color:#CCCCCC;
}
相关文章推荐
- IE9以下通过css让html页面背景图片铺满整个屏幕
- css怎样让背景充满整个屏幕
- html中的背景图片不能充满整个浏览器 .
- css怎样让背景充满整个屏幕
- 如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕(自适应大小)
- 【CSS背景图片页面自适应充满屏幕】
- html中的背景图片不能充满整个浏览器
- html 网页背景图片根据屏幕大小CSS自动缩放
- 设置背景图片占满整个浏览器屏幕
- 【学习摘记】马士兵HTML & CSS_课时2_链接到页面的某个具体位置、背景图片与引用路径
- Html+Css CSS中背景图片定位方法
- 005_HTML制作炫酷登录界面(CSS精灵图、背景图片局部显示)
- 网页图片背景充满整个页面
- 制作html网页时如何使用CSS使背景图片拉伸(填充)
- CSS HTML实现背景图片的填充
- QT label样式表实现背景图片自动拉伸缩小(充满整个Label)
- html/css背景图片自适应分辨率大小
- CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV
- 背景图片在html中能显示在css中不能显示