CSS实现背景图片屏幕自适应
在做登陆页面等的首页的时候，经常会遇到需要放一张背景大图的情况，并且需要图片按比例缩放，来适应不同屏幕的大小。
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;
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实现背景图片屏幕自适应的更多相关文章
- 纯CSS控制背景图片100%自适应填充布局
https://blog.csdn.net/wd4java/article/details/50537562 解决: html,body{height: 100%;width: 100%;marg ...
- css设置背景图片自适应
CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- CSS中背景图片定位方法
转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...
- CSS中背景图片的background-position中的left top到底是相对于谁的？
在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...
- (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...
- HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
- 如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕（自适应大小）
默认情况下,通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后,图片会自动横向和纵向平铺.这就会产生一些美观上的问题. ...
- CSS常用背景图片定位方法
CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...
随机推荐
- 05-CSS浮动、定位、页面布局
# 浮动 ### 文档流文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置. # ...
- go中基本数据类型的相互转换
代码 // 基本数据类型的相互转换 package main import ( // 如果一个包没有被使用过,但又不想去掉,可在包名前加"_ "表示忽略 // 比如:_ " ...
- 自己实现一个Redux
Redux是一个可预测的状态容器,提供可预测的状态管理. 什么是状态?状态其实也就是数据,管理状态也就是对数据的管理.那么什么是可预测的状态管理呢?能够监听数据的变化,获取变化的来源,在发生变化时可以 ...
- [翻译]解释JavaScript中的类型转换
原文地址:JavaScript type coercion explained 类型转换是将值从一种类型转换为另一种类型的过程(比如字符串转换为数值,对象转换为布尔值,等等).任何类型,无论是原始类型 ...
- SQL Server 查找字符串中指定字符出现的次数
要查找某个指定的字符在字符串中出现的位置,方法比较简单,使用 len() 函数和 replace() 函数结合就可以. SELECT TOP 200 approveInfo approveInfo2, ...
- netcore项目使用swagger开发
首先我创建一个netcore项目,我使用的工具是vs2019 这里需要注意的是,看情况选择是否开启身份验证,一般是没有需求的,这里因为我是测试使用所以需要取消勾兑为https配置,并且我没有启用doc ...
- dotnet ef执行报错, VS 2019发布时配置项中的Entity Framework迁移项显示不出来
VS 2019发布时配置项中的Entity Framework迁移项显示不出来 dotnet ef dbcontext list --json “无法执行,因为找不到指定的命令或文件.可能的原因包括: ...
- Ubuntu16.04 重新安装误删的某个*.so文件
在使用Ubuntu系统时,如果不小心将某个*.so文件删除,该如何重新安装呢? 如果直接使用命令:sudo apt-get install *.so 可能会报错或者找不到这个*.so文件. 正确 ...
- [php代码审计] php四种标记
php手册中的介绍: 可以在 PHP 中使用四对不同的开始和结束标记.其中两种,<?php ?> 和 <script language="php"> < ...
- Redis安装配置以及开机启动
1.下载源码,解压缩后编译源码. $ wget http://download.redis.io/releases/redis-2.8.3.tar.gz $ .tar.gz $ cd redis- ...