CSS 怎么设置全屏背景图片? 下面本篇文章给大家介绍一下使用 CSS 设置自适应全屏背景图片的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
一张清晰漂亮的背景图片能给网页加分不少, 设计师也经常会给页面的背景使用大图, 我们既不想图片因为不同分辨率图片变形, 也不希望当在大屏的情况下, 背景有一块露白, 简而言之, 就是实现能自适应屏幕大小又不会变形的背景大图, 而且背景图片不会随着滚动条滚动而滚动.
以下是用 CSS 实现的方法:
html:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- title
- </title>
- </head>
- <body>
- <div class="wrapper">
- <!-- 背景图片 -->
- <div id="web_bg" style="background-image: url(./img/bg.jpg);">
- </div>
- <!-- 其他代码 ... -->
- </div>
- </body>
- </HTML>
CSS:
- #web_bg{
- position:fixed;
- top: 0;
- left: 0;
- width:100%;
- height:100%;
- min-width: 1000px;
- z-index:-10;
- zoom: 1;
- background-color: #fff;
- background-repeat: no-repeat;
- background-size: cover;
- -webkit-background-size: cover;
- -o-background-size: cover;
- background-position: center;
- }
效果图:
下面, 我们来分析一下, CSS 中每句代码的作用是什么:
- position:fixed;
- top: 0;
- left: 0;
这三句是让整个 div 固定在屏幕的最上方和最左方
- width:100%;
- height:100%;
- min-width: 1000px;
上面前两句是让整个 div 跟屏幕实现一模一样的大小, 从而达到全屏效果, 而 min-width 是为了实现让屏幕宽度在 1000px 以内时, div 的大小保持不变, 也就是说在这种情况下, 缩放屏幕宽度时, 图片不要缩放 (只有在 1000px 以内才有效).
z-index:-10;
这个的目的是让整个 div 在 HTML 页面中各个层级的下方, 正常情况下, 第一个创建的层级 z-index 的值是 0, 所以如果我们这里写成 - 1 也可以实现, 不过这里写 - 10 是确保整个 div 在最下面, 因为如果页面中层级太多了, 有的时候用 - 1 不一定在最下面, 但如果写成 - 100 这样大数字的也没有什么意义. 用 index:-10 以此能达到看上去像背景图片, 其实是一个最普通的 div, 只是层级关系变了, 才让人看上去看是背景图片.
background-repeat: no-repeat;
上面这个是背景不要重复
- background-size: cover;
- -webkit-background-size: cover;
- -o-background-size: cover;
上面三句是一个意思, 就是让图片随屏幕大小同步缩放, 但是有部分可能会被裁切, 不过不至于会露白, 下面两句是为 Chrome 和 opera 浏览器作兼容.
background-position: center;
上面这句的意思就是图片的位置, 居中对齐.
更多 Web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/18277.html