背景大小

background-size: % %;//宽 高
background-size: 100px 100px;//宽 高
background-size: cover;//覆盖,图片会完全覆盖盒子,有可能显示不完整,缩放是等比例的
background-size: contain;//包含,背景图片会完全等比例,显示盒子中,有可能不会铺满盒子

背景裁剪

background-origin: border-box;//设置背景原点为border-box
background-clip:content-box;//只显示content区域

backgrond-clip:1、border-box    2、padding-box(默认padding)    3、content-box

多背景图片

background: url(images/bg1.png) no-repeat left top,
url(images/bg2.png) no-repeat right top,
url(images/bg4.png) no-repeat left bottom,
url(images/bg3.png) no-repeat right bottom,
url(images/bg5.png) no-repeat center center;

html5——背景的更多相关文章

  1. 使用按钮控制HTML5背景音乐开关

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

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

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

  3. HTML5背景知识

    目录 HTML5背景知识 HTML的历史 JavaScript出场 浏览器战争的结束 插件称雄 语义HTML浮出水面 发展态势:HTML标准滞后于其使用 HTML5简介 新标准 引入原生多媒体支持 引 ...

  4. HTML5 QQ登录背景动态图片

    预览效果如图所示: 代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" cont ...

  5. HTML5学习笔记<六>: HTML5框架, 背景和实体

    HTML5框架 1. 框架标签(frame): 框架对于页面的设计有着很大的作用 2. 框架集标签(<frameset>): 框架集标签定义如何将窗口分割为框架 每个frameset定义一 ...

  6. HTML5框架、背景和实体

    -----------------siwuxie095                                 HTML5 框架         1.框架标签 <frame>   ...

  7. HTML5权威指南 中文版 高清PDF扫描版​

    HTML5权威指南是一本系统学习网页设计的权威参考图书.<HTML5权威指南>分为五部分:第一部分介绍学习本书的预备知识和HTML.CSS和JavaScript的最新进展:第二部分讨论HT ...

  8. Kinect for Windows SDK 1.8的改进及新特性

    今年3月, 微软推出了Kinect for Windows SDK 1.7 更新,包括了手势识别 Kinect Interactions 和实时 3D 建模 Kinect Fusion 两项新技术. ...

  9. Atitit.html css  浏览器原理理论概论导论attilax总结

    Atitit.html css  浏览器原理理论概论导论attilax总结 1.1. 浏览器是怎样工作的:渲染引擎,HTML解析(连载二)1 2. 5.1.1 DOM标准 1011 3. <We ...

随机推荐

  1. [poj2234]Matces Game_博弈论

    Matches Game poj-2234 题目大意:n堆石子的Nim游戏,anti-SG. 注释:$1\le n\le 20$. 想法:用Colon定理即可.具体见:小约翰的游戏 最后,附上丑陋的代 ...

  2. JavaScript 读取CSV文件并转为js对象

    html部分 <!-- 创建隐藏file input --><button type="button" name="seach" onclic ...

  3. Maven使用GitHub项目目录搭建远程仓库

    使用GtiHub的项目目录搭建第三方远程仓库,能免除使用服务器搭建Nexus私服,而且空间也是免费的.但是这种方式只适合小规模发布,毕竟搜索和版本控制是一个问题,如果需要更复杂的功能就只能转向Nexu ...

  4. MySQL: Create Master - Slave Servers

    http://www.unixmen.com/setup-mariadb-master-slave-replication-in-centos-7/ and http://www.rackspace. ...

  5. Cocos Code IDE + Lua初次使用FastTiledMap的坑

    近期想玩玩Lua.又想玩玩Cocos Code IDE.更加想写一个即时战斗的.防守的.会动的.有迷雾的.要探索的(旁白:给我停!)跑地图游戏. 于是我就用Cocos Code IDE来写游戏了.挑战 ...

  6. 5分钟Serverless实践:构建无服务器的图片分类系统

    前言 在过去“5分钟Serverless实践”系列文章中,我们介绍了如何构建无服务器API和Web应用,从本质上来说,它们都属于基于APIG触发器对外提供一个无服务器API的场景.现在本文将介绍一种新 ...

  7. Unity3d中相应各平台Path

    IOS: Application.dataPath :                      Application/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/xx ...

  8. HDOJ 题目5289 Assignment(RMQ,技巧)

    Assignment Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total ...

  9. hdoj 4925 Apple tree 【最小割】

    题目:pid=4925">hdoj 4925 Apple tree 来源:2014 Multi-University Training Contest 6 题意:给出一个矩阵,然后每一 ...

  10. HDU 5862Counting Intersections

    Counting Intersections Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/ ...