在做登陆页面等的首页的时候，经常会遇到需要放一张背景大图的情况，并且需要图片按比例缩放，来适应不同屏幕的大小。

html代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <link rel="stylesheet" href="../css/login.css"><!-- 我的css代码路径 -->

     <title>。。。</title>

 </head>

 <body>

     <div class="bgimg">

 </body>

 </html>

　　

css代码如下：

 .bgimg{

     position:fixed;

     top:;

     left:;

     width:100%;

     height:100%;

     min-width: 1000px;

     z-index:-10;

     zoom:;

     background-color: #fff;

     background: url(../img/bg_login.jpg) 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的大小保持不变，也就是图片不缩放。

z-index:-10;　　
这个的目的是让整个div在HTML页面中各个层级的下方，正常情况下，默认创建的层级z-index的值是0，所以如果我们这里写成-1也可以实现，不过这里写-10是确保整个div在最下面，因为如果页面中层级太多了，有的时候用-1不一定在最下面，但如果写成-100这样大数字的也没有什么意义。用-10 以此能达到看上去像背景图片，其实是一个最普通的div，只是层级关系变了，才让人看上去看是背景图片。
zoom: 1;

　　zoom是CSS hack中专对IE6起作用的部分。IE6浏览器会执行zoom:1表示对象的缩放比例。兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，zoom有如下作用：1.触发IE浏览器的haslayout； 2.解决ie下的浮动，margin重叠等一些问题。

background-repeat: no-repeat;

　　图片平铺，不重复

  background-size: cover;

  -webkit-background-size: cover;

  -o-background-size: cover;

　　上面三句是一个意思，就是让图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，下面两句是为chrome和opera浏览器作兼容。

background-position: center 0;

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

效果如下：

大于1000px时:(截图太大了，我把图片缩小了点)

小于1000px时：

原图：(这个也太大了缩小了点)

作者：汤利利
链接：https://www.jianshu.com/p/5480cd1a5d89
来源：简书

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

  1. 纯CSS控制背景图片100%自适应填充布局

    https://blog.csdn.net/wd4java/article/details/50537562 解决:   html,body{height: 100%;width: 100%;marg ...

  2. css设置背景图片自适应

      CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...

  3. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  4. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

  5. CSS中背景图片的background-position中的left top到底是相对于谁的？

    在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...

  6. (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...

  7. HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...

  8. 如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕（自适应大小）

    默认情况下,通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后,图片会自动横向和纵向平铺.这就会产生一些美观上的问题. ...

  9. CSS常用背景图片定位方法

    CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...

随机推荐

  1. FFmpeg从入门到出家（HEVC在RTMP中的扩展）

    由金山云视频云技术团队提供:FFmpeg从入门到出家第三季: 为推进HEVC视频编码格式在直播方案中的落地,经过CDN联盟讨论,并和主流云服务厂商达成一致,规范了HEVC在RTMP/FLV中的扩展,具 ...

  2. python基础篇（完整版）

    目录 计算机基础之编程和计算机组成 什么是编程语言 什么是编程 为什么要编程 编程语言的分类 机器语言(低级语言) 汇编语言 高级语言 计算机的五大组成 CPU(相当于人类的大脑) 多核CPU(多个大 ...

  3. 通过离线安装包解决了 from cryptography.hazmat.bindings._openssl import ffi, lib ImportError: /usr/local/python36/lib/python3.6/site-packages/cryptography-2.2.2-py3.6-linux-x86_64.egg/cryptography/hazmat/binding

    场景:内网服务器不能上外网(代理也不通!), 之前安装了PYTHON的几个安装包,但不是知道为什么无法使用PARAMIKO这个模块 在导入 from cryptography.hazmat.bindi ...

  4. V7双雄-基于Virtex7XC7VX690T的高性能计算板卡解决方案

    北京太速V7双雄-基于Virtex7XC7VX690T的高性能计算板卡

  5. 3-基于双TMS320C6678+双XC6VSX315T的6U VPX高速数据处理平台

    基于双TMS320C6678+双XC6VSX315T的6U VPX高速数据处理平台   一.板卡概述 板卡由我公司自主研发,基于VPX架构,主体芯片为两片 TI DSP TMS320C6678,两片V ...

  6. 1142. Maximal Clique (25)

    A clique is a subset of vertices of an undirected graph such that every two distinct vertices in the ...

  7. ps：选区的存储及载入

    有时候需要把已经创建好的选区存储起来,方便以后再次使用.就要使用选区存储功能. 创建选区后,直接点击右键(限于选取工具)出现的菜单中就“存储选区”项目.也可以使用菜单[选择 存储选区].会出现一个名称 ...

  8. pspice中参数的意义

    摘自:http://royroyyy.blog.163.com/blog/static/137650617201102610471196/ 有源器件在符号库中的名称(NAME)通常以关键字开头,后根长 ...

  9. 【leetcode】403. Frog Jump

    题目如下: 解题思路:我的做法是建立一个字典dic,key为stone,value是一个set,里面存的是从前面的所有stone跳跃到当前stone的unit集合.例如stones=[0,1,2,3] ...

  10. python学习笔记（二十）：异常处理

    def calc(a,b): res=a/b return res def main(): money=input('输入多少钱:') months=input('还几个月:') try: res=c ...