细节注意

  1. 盒子：border-box | padding-box | content-box用于background-origin背景的开始和background-clip的剪切位置。
  2. 渐变也是生成一张图片相当url(),可以在前面或者后面加 repeat background-size其他等
  3. 多层背景，最后加背景颜色哦，当然其他也能加，但是前面加的就覆盖最后的了。
  4. 例子：240px 120px/100% 200px，这里面的背景开始位置position/背景尺寸size都是x和y方向，可以负值，可以百分比（以当前div的宽高，而不是背景图片的宽高的百分比）。
  5. position和origin开始位置的区分

文档：

doyue的手册

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>JS Bin</title>
  7.   <style>
  8.     div{display:relative;float:left;}
  10.   .box0{width:100px;height:100px;background:red;opacity:0.1; transition:height 5s, width ,5s;}
  11. .box0:hover{ background:blue;width:200px;opacity:1;height:300px;}
  13.     .box1{
  14.       width:100px;height:230px;/*opacity:0.1; */
  15.       background:url("http://images.cnblogs.com/cnblogs_com/leee/801892/o_like.png");
  16.      /*background-size:contain; *//*将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。*/
  17.      /* background-size:cover;*/ /*将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。y轴方向北京图片显示完全，*/
  18.      /*background-size:100% 100%; *//*自定义背景图像宽高,为当前div宽高的百分比，如果小于div宽高，背景重复，需要设置repeat*/
  19.      /*background-size:100% 50%; */
  20.      /* background-size:100px 70px; *//*自定义背景图像大小，xy的大小，如果小于div宽高，背景重复，需要设置repeat*/
  21.       background-size:30px 70px;
  22.       transition:1s;
  23.      /*border:5px solid red;*//*没有顺序哦~*/
  24.       border:red solid  5px;
  25.      /*font:italic small-caps bold  16px/1 Simsun,arial,sans-serif;*/
  27.     }
  28.     .box1:hover{opacity:0.3;}
  30.     .box2{
  31.       height:400px;width:400px;
  32.   border:4px solid orange;
  33.   background:url(http://pic36.nipic.com/20131125/8821914_113934565000_2.jpg) 0 0/130px 140px  no-repeat,
  34.   no-repeat url(http://images.cnblogs.com/cnblogs_com/leee/801892/o_like.png) 100px 100px/130px 250px   ,
  35.   no-repeat  url("http://www.pp3.cn/uploads/201605/20160514011.jpg") 240px 120px/100% 100%,/*100% 100%超过了*/
  36.   no-repeat  url("http://www.pp3.cn/uploads/201605/20160514011.jpg") 190px -10px/180px 150px ,
  37.    -webkit-linear-gradient(bottom,yellow,yellowgreen) 0 0/100% 100%;/*渐变生成一张图,就相当于url()~*/
  38.     }
  39.    .box3{
  40.       height:400px;width:400px;
  41.       border:4px solid orange;
  42.       background:url(http://pic36.nipic.com/20131125/8821914_113934565000_2.jpg) 0 0/130px 140px  no-repeat,/*没有顺序哦~*/
  43.       no-repeat url(http://images.cnblogs.com/cnblogs_com/leee/801892/o_like.png) 100px 100px/130px 250px ,
  44.       url("http://www.pp3.cn/uploads/201605/20160514011.jpg") no-repeat 240px 120px/100% 100%,
  45.       no-repeat  url("http://www.pp3.cn/uploads/201605/20160514011.jpg") 190px -10px/180px 150px green;
  46.      /*注意，red 只能设置一次，且由于写在前面的背景会叠在之后的背景之上，所以背景色通常都定义在最后一组上，避免背景色将图像盖住。*/
  47.     }
  48.     .box4{ height:400px;width:400px;
  49.       padding-bottom:10px;/*剪切的时候，padding-box，就是padding也显示背景*/
  50.       border:40px dotted orange;
  51.       margin:50px;
  52.     background:  no-repeat url(http://images.cnblogs.com/cnblogs_com/leee/801892/o_like.png) 100px 100px/130px 100% border-box padding-box;
  53.       /*background-origin：border-box | padding-box | content-box*/
  54.        /*从border/padding/content区域（含border/padding/content）开始显示背景图像。 */
  56.       /*background-clip：border-box | padding-box | content-box | text
  57.       从border/padding/content区域（不含border/padding/content）开始向外裁剪背景。
  58. */
  59.     }
  60.   </style>
  61. </head>
  62. <body>
  63. <div class="box0"></div>
  64.   <div class="box1">这是一段字体</div>
  65.   <div class="box2"></div>
  66.   <div class="box3"></div>
  67.   <div class="box4"></div>
  69. </body>
  70. </html

结果1

结果2

CSS3：背景的更多相关文章

  1. CSS3背景温故

    1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...

  2. css3 背景记

    css3 背景 css背景主要包括五个属性: background-color background-color:transparent || <color> 用来设置元素的背景颜色,默认 ...

  3. CSS自学笔记（11）:CSS3背景和边框

    CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...

  4. 第七十九，CSS3背景渐变效果

    CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一．线性渐变 linear-gradi ...

  5. 从零开始学习前端开发 — 17、CSS3背景与渐变

    一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...

  6. css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  7. [转]真正了解CSS3背景下的@font face规则

    本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...

  8. css3 背景background

    Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...

  9. CSS3背景 制作导航菜单综合练习题

    CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...

  10. css3-3 css3背景样式

    css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...

随机推荐

  1. java 执行command

    StringBuffer buf = new StringBuffer(1000); try { Process pos = Runtime.getRuntime().exec("sh &q ...

  2. 线段覆盖4（codevs 3012）

    题目描述 Description 数轴上有n条线段,线段的两端都是整数坐标,坐标范围在0~1000000,每条线段有一个价值,请从n条线段中挑出若干条线段,使得这些线段两两不覆盖(端点可以重合)且线段 ...

  3. 一、HTML和CSS基础--HTML+CSS基础课程--第3部分

    第五章 CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 内联式cs ...

  4. SQLite常用网址

    英文版SQLite官网: http://www.sqlite.org/rescode.html中文版SQLite官网:http://www.helplib.net/s/sqlite/9/167.sht ...

  5. 敏捷开发之Scrum扫盲篇(转)

    转:http://www.cnblogs.com/taven/archive/2010/10/17/1853386.html 现在敏捷开发是越来越火了,人人都在谈敏捷,人人都在学习Scrum和XP.. ...

  6. JAVA基础学习之命令行方式、配置环境变量、进制的基本转换、排序法、JAVA文档生成等（1）

    1．命令行方式 dos命令行,常见的命令: dir:列出当前目录下的文件以及文件夹 md:创建目录 rd:删除目录 cd:进入指定目录 cd..:退回到上一级目录 cd/:退回到根目录 del:删除文 ...

  7. 在Android4.4上新增加keycode

    keycode是android定义好的,但是有时候无法满足需要,进行定制化难免会涉及到新增加keycode.分成两部分,驱动和framework,这里主要讲解framework部分: 一.驱动部分: ...

  8. VIM Tutorials----（updating）

    This is my first English tutorial; I hope I can help you to learn VIM. Any question send email to me ...

  9. Android VLC播放器二次开发1——程序结构分析

    最近因为一个新项目需要一个多媒体播放器,所以需要做个视频.音频.图片方面的播放器.也查阅了不少这方面的资料,如果要从头做一个播放器工作量太大了,而且难度也很大.所以最后选择了VLC作为基础,进行二次开 ...

  10. hdu 1756 判断点在多边形内 *

    模板题 #include<cstdio> #include<iostream> #include<algorithm> #include<cstring> ...