背景大小

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. Hackerrank alien-flowers(数学公式)

    题意:求能够构造出的符合以下条件的字符串的数目 .字符串只由R和B组成且长度不为0 .字符串含有A个RR,B个RB,C个BB,D个BR A,B,C,D<=1e5 分析:最简单的方法就是dp,但是 ...

  2. iOS消息推送原理和实现总结

    一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图:1. Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provi ...

  3. internalsviewer

    https://intview2.codeplex.com/ https://internalsviewer.codeplex.com/releases/view/21139

  4. nginx + mysql + php-fpm 环境

    安装 Nginx 想在 CentOS 系统上安装 Nginx ,你得先去加入一个资源库.像这样: vim /etc/yum.repos.d/nginx.repo 使用 vim 命令去打开 /etc/y ...

  5. 【二】注入框架RoboGuice使用:(Your First View Injection)

    上一篇我们简单的介绍了一下RoboGuice的使用([一]注入框架RoboGuice使用:(A brief example of what RoboGuice does)),今天我们我看下View的注 ...

  6. ES6 一些常用使用

    //1.解构数组 let arr1 = ['apple', 'coffee', 'cake']; let [fruit, drink, dessert] = arr1; console.log(fru ...

  7. Codeforces Round #325 (Div. 2) B. Laurenty and Shop 前缀+后缀

                                                                                 B. Laurenty and Shop   ...

  8. Java之正則表達式【使用语法】

    认为好就顶一个!! ! ! 3.正則表達式 用一些特殊的有意义的字符组成的字符串(死记) 原子:正則表達式的最基本组成单位 正則表達式特殊意义的字符:   .  *  +  ?不能单独表示它们,假设非 ...

  9. luogu2679 子串

    题目大意 有两个仅包含小写英文字母的字符串 A 和 B.现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一 个新的字符串,请问 ...

  10. ubuntu安装phpstorm

    首先要安装jdk $ java -version java version "1.8.0_171" Java(TM) SE Runtime Environment (build 1 ...