在写主题样式的时候经常会碰到用背景图铺满整个背景的需求，这里分享下使用方法

需要的效果

  1. 图片以背景的形式铺满整个屏幕，不留空白区域
  2. 保持图像的纵横比（图片不变形）
  3. 图片居中
  4. 不出现滚动条
  5. 多浏览器支持

以图片bg.jpg为例

最简单，最高效的方法 CSS3.0

归功于css3.0新增的一个属性background-size，可以简单的实现这个效果，这里用fixed和center定位背景图，然后用background-size来使图片铺满，具体css如下

  1. -webkit-background-size: cover;
  2. -moz-background-size: cover;
  3. -o-background-size: cover;
  4. background-size: cover;

适用于以下浏览器

  • Safari 3+
  • Chrome
  • IE 9+
  • Opera 10+ (Opera 9.5 支持background-size属性 但是不支持cover)
  • Firefox 3.6+

低版本浏览器不支持 。

css设置全屏背景图，background-size 属性的更多相关文章

  1. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

  2. css 设置全屏背景图片

    <div id="div1"><img src="img.jpg" /></div> div#div1{ position: ...

  3. 全屏背景图的实现及background的相关属性

    今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:      (图一)     ...

  4. CSS实现响应式全屏背景图

    body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直.水平均居中 */ background- ...

  5. css2如何设置全屏背景图片

    每次在做一个网站后台登陆页面的时候,当UI给我一张背景是不规律的背景图片,但是在设置为背景时,总会遇到屏幕大小的问题,导致背景图片有可能平铺.这样UI的效果达不到也会很难看. 本来我想用body{ba ...

  6. 一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器

    基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C// ...

  7. unity中全屏背景图缩放

    using UnityEngine; using System.Collections; public class BgPicScript : MonoBehaviour { // Use this ...

  8. Android开发中的全屏背景显示方案

    引子 不管是Android还是iOS平台中,都可以看到一些应用在启动的时候会先出现一个启动画面(Splash Activity),如QQ.微信等.这个启动画面中往往会将ActionBar和Status ...

  9. background 设置文本框背景图

    background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. ...

随机推荐

  1. koa 基础（七）错误处理中间件

    1.错误处理中间件 app.js /** * 错误处理中间件 */ // 引入模块 const Koa = require('koa'); const router = require('koa-ro ...

  2. kindeditor 引用js架包问题

    最近在搞kindeditor(富文本编辑器),遇到了很多插件修改无效的问题,仔细研究了一下才发现,别有洞天. 下面来介绍一下引用的js架包.具体有什么用. <!-- kindeditor.js ...

  3. 解决JxBrowser中BrowserView控件覆盖其他控件的办法

    https://blog.csdn.net/w815878564/article/details/79699559 JxBrowser是一个基于chromium的Java浏览器组件,同时支持Swing ...

  4. LC 789. Escape The Ghosts

    You are playing a simplified Pacman game. You start at the point (0, 0), and your destination is(tar ...

  5. SQLite 版本引发的 Python 程序调用问题

    问题 在跑 OpenStack functional 功能测试的时候有两个用例过不去. nova.tests.functional.db.test_resource_provider.Resource ...

  6. 阶段3 3.SpringMVC·_05.文件上传_4 文件上传之Springmvc方式上传代码

    后台提供新的方法,上传的方法复制一份传统上传的代码.改名为fileupload2 配置解析器 名字必须叫做myltipartResolver 里面可以配置一些属性,例如上传文件的大小等. 文件大小 最 ...

  7. jenkins+git+gitlab+ansible实现持续集成自动化部署

    一.环境配置 192.168.42.8部署gitlab,节点一 192.168.42.9部署git,Jenkins,ansible服务器 192.168.42.10节点二 二.操作演示 ①gitlab ...

  8. dockerfile中配置时区

    https://www.cnblogs.com/kevingrace/p/5570597.html #设置时区RUN /bin/cp /usr/share/zoneinfo/Asia/Shanghai ...

  9. java8：（Lambda 表达式，Supplier，@FunctionalInterface，foreach()，Optional，Stream().collect，双冒号，joining，partitioningBy分区，collectingAndThen，filter()）

    1.Lambda 表达式: 引导:http://www.cnblogs.com/yulinfeng/p/8452379.html DEMO1: List<String> names1 = ...

  10. pika常见问题解答（FAQ）

    1 编译安装 Q1: 支持的系统? A1: 目前只支持Linux环境,包括Centos,Ubuntu: 不支持Windowns, Mac Q2: 怎么编译安装? A2: 参考编译安装wiki Q3: ...