一张清晰漂亮的背景图片能给网页加分不少，设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而且背景图片不会随着滚动条滚动而滚动。

以下是用CSS实现的方法：

HTML：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <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 0;

}

下面，我们来分析一下，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 0;

上面这句的意思就是图片的位置，居中，靠左对齐。

转载：https://www.jianshu.com/p/5480cd1a5d89

CSS实现网页背景图片自适应全屏的更多相关文章

  1. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  2. CSS实现网页背景图片自适应全屏,自适应背景图片

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  3. css背景图自适应全屏显示

    前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容Bootstrap的响应式布局).对,是我腊鸡 后来我在网上找的时候找到一个大神写的笔记,参(照)考(抄)之 ...

  4. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

  5. 点击图片video全屏

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. 基于html5背景图片自适应代码

    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jaw ...

  7. css代码添加背景图片常用代码

    css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...

  8. bootstrop设置背景图片自适应屏幕

    如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...

  9. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

随机推荐

  1. 时间序列数据库rrd启动

    然后执行启动定时任务目录:etc/crontab SHELL=/bin/bashPATH=/sbin:/bin:/usr/sbin:/usr/binMAILTO=rootHOME=/ # For de ...

  2. 基于Parallax设计HTML视差效果

    年关将至,给大家拜年. 最近时间充裕了一点,给大家介绍一个比较有意思的控件:Parallax.它可以用来实现鼠标移动时,页面上的元素也做偏移的视差效果.在一些有表现层次,布局空旷的页面上,用来做Hea ...

  3. Yii2 场景

    下面给大家介绍一下 yii2.0 场景的使用. 现在在 post表里面有 title image content 三个的字段,当我创建一个 post 的时候,我想三个字段全部是必填项,但是你修改的时候 ...

  4. PHP 是一门弱类型语言

    PHP 是一门弱类型语言 我们注意到,不必向 PHP 声明该变量的数据类型. PHP 会根据变量的值,自动把变量转换为正确的数据类型. 在强类型的编程语言中,我们必须在使用变量前先声明(定义)变量的类 ...

  5. php的内置函数debug_backtrace()与get_included_files()跟踪代码调用(Thinkphp框架举例)

    debug_backtrace() 在我们开发一个项目中,或者二开研究某个开源程序,需要对代码流程一步步去跟踪,来研究它的逻辑,才可以进行修改,达到我们的开发目的.php的内置函数debug_back ...

  6. Centos下安装php扩展sphinx

    官方地址:http://pecl.php.net/package/sphinx wget http://pecl.php.net/get/sphinx-1.3.3.tgz tar -zxvf sphi ...

  7. Jenkins系列——定时构建

    1.环境说明 操作系统:win7旗舰版64bit jdk:sun JDK1.7.0_80 64bit tomcat:apache-tomcat-8.0.41 jenkins:2.32.3LST 本系列 ...

  8. SpringBoot项目在IntelliJ IDEA中实现热部署

    spring-boot-devtools是一个为开发者服务的一个模块,其中最重要的功能就是自动应用代码更改到最新的App上面去.原理是在发现代码有更改之后,重新启动应用,但是速度比手动停止后再启动更快 ...

  9. 总结MySQL大数据量下如何进行优化

    写在建库前: 在确定数据库业务后.建立数据库表格时,就应对一些常见问题有所考虑,以避免在数据增长一段时间后再做应对,可能造成时间及维护成本增加: 数据的月增量,年增量 数据的快速增长点 是否需要触发器 ...

  10. shell 脚本——判断条件

    在之前的shell语言学习笔记中已经写过shell的几种判断语句及循环语句,也简单的介绍了shell语言判断语句和判断条件.在此再做进一步学习. test命令的测试功能 test命令用于检测系统文件及 ...