背景大小

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. MVC之查询demo

    上篇已经说过怎样建立MVC项目.这次主要讲述样例的实现. 其基本的功能就是从数据库中查询一些基本信息. 前边我们已经将实体引入到了项目中,这时Model目录中已经出现了我们建立的newsSystem. ...

  2. varnish代理server笔记

    varnish是一款开源的代理server软件.和Squid的差别是採用内存进行数据缓存. 速度很的快,并且不easy崩溃.可是奔溃之后全部数据都消失,导致全部请求全部发送至后台server端,这是其 ...

  3. 【翻译自mos文章】rman 标准版和企业版的兼容性

    rman 标准版和企业版的兼容性 来源于: RMAN Standard and Enterprise Edition Compatibility (文档 ID 730193.1) 适用于: Oracl ...

  4. Android高仿UC浏览器和360手机卫士消息常驻栏(通知栏)

    之前网上看了下自己定义消息栏,通知栏,了解到了Notification这个控件.发现UC浏览器等都是这样的类型,今天写个demo实现下.如图: 当中每一个button都有不同的功能.代码例如以下: p ...

  5. 将分布式-队列的实现交给redis

    import requestsimport reimport timefrom redis import Redisimport threading REDIS_HOST, REDIS_PORT, P ...

  6. 让ListView回来原来的位置

    让ListView回到原来的位置 当从ListView中的某一个Item跳转到其他的Activity,进行操作之后,ListView可能需要刷新(重新加载数据源),这个时候ListView就会回到原始 ...

  7. WebView播放H5课件时,锁屏解锁后,页面重新绘制的问题

    难题描述:H5页面播放 ,锁屏,解锁后,重新加载了页面,三星不会出现(onpause onstop ,onresume),但在小米.魅族会调用 onpause onstop ondestroy,onr ...

  8. Opencv打开内置摄像头

    Opencv中VideoCapture是专门用来处理视频文件或者摄像头视频流的类,详细的说明和用法可以参考Opencv2.4.13的说明文档:点击打开链接 使用VideoCapture打开内置摄像头的 ...

  9. Spark SQL中 RDD 转换到 DataFrame

    1.people.txtsoyo8, 35小周, 30小华, 19soyo,882./** * Created by soyo on 17-10-10. * 利用反射机制推断RDD模式 */impor ...

  10. Coursera Algorithms week3 快速排序 练习测验: Decimal dominants(寻找出现次数大于n/10的元素)

    题目原文: Decimal dominants. Given an array with n keys, design an algorithm to find all values that occ ...