1. background (background-color, background-image)  背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ;

背景颜色: 起点 是 border的外边缘

http://www.w3cplus.com/content/css-background-origin

背景图片:定位的起点是 padding的外边缘处:

这是因为: background-origin 指定背景图像的定位区域   默认是 padding-box;

1) background-color:

包括的范围: border + padding + width:

注意的就是: 如果 border不是透明的话 ,border的颜色 会覆盖 住 background-color: 造成一种假象(范围是 padding + width);

当这是错误的.  如果 将border 设置为 透明 ,就会清楚的看到  background-color 的范围是  border + padding + width:

  1.  <!DOCTYPE html>
  2.  <html lang="zh-CN">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>background-color: 定位的起点是 border的外边缘</title>
  6.      <style type="text/css">
  7.          .box {
  8.              width: 200px;
  9.              height: 200px;
  10.              border: 50px solid transparent;
  11.  
  12.              background-color: red;
  13.  
  14.              /*background-image: url(img/2.png);
  15.              background-size: 100px 100px;
  16.              background-repeat: no-repeat;*/
  17.  
  18.              padding: 50px;
  19.          }
  20.      </style>
  21.  </head>
  22.  <body>
  23.  
  24.      <div class="box">
  25.          1111
  26.      </div>
  27.  </body>
  28.  </html>

width: 200px  ;  padding: 50px;  border: 50px  并且透明:

因为: 背景色 是从 border外边缘开始 : 所以是   200(width) + 2*50(padding) + 2*50(border)

显示

如果 border 不设置为透明:

----------

如果border 不设置为 solid ,看得更清楚一点.

-------------------------------------

2) background-image

覆盖的范围 是 width + padding

  1.  <!DOCTYPE html>
  2.  <html lang="zh-CN">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>background-image: 定位的起点默认是是padding的外边缘, 可以通过background-origin修改</title>
  6.      <style type="text/css">
  7.          .box {
  8.              width: 200px;
  9.              height: 200px;
  10.              border: 50px solid transparent;
  11.  
  12.              background-color: red;
  13.  
  14.              background-image: url(img/2.png);
  15.              background-size: 100px 100px;
  16.              background-repeat: no-repeat;
  17.  
  18.              padding: 50px;
  19.          }
  20.      </style>
  21.  </head>
  22.  <body>
  23.  
  24.      <div class="box">
  25.          1111
  26.      </div>
  27.  </body>
  28.  </html>

显示:

 

参考链接:    菜鸟教程:

2. 设置多个背景图像

参见 1 -> 2) 中.  有两个背景图片 . 一个是纹理 x 和 y 都铺满了. 定位在 左上角(默认位置)  ; 一个是花朵 ,没有平铺,  并且定位在右下角.

3.background-position 定位的时候 ,百分比的意思.

background-image: 30%  40%;

如果容器的 宽和高是  500px,  背景的宽和高是 100px;

------

错误:  容器宽 * 百分比 ;  容器 高 * 百分比:

　　背景 左上角 定位: 距离 x 轴是500 * 30% = 150px , 距离 y轴 是 500 * 40% =  200px;

------

正确:  (容器宽 - 背景宽) * 百分比;   (容器高 - 背景高) * 百分比:

  注意: 容器宽 = width + padding  ;   容器高 = height + padding

　　背景左上角定位: 距离 x 轴 是  (500 - 100) * 30% = 120px;  距离 y 轴 是 (500 - 100) * 40% = 160px;

---------------------

这是因为:

如果我们设置 background-origin : content-box 时 ,  容器 宽度 就是 width . 容器 高度 就是 height;

------------------

  1.  <!DOCTYPE html>
  2.  <html lang="zh-CN">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>background-position百分比表示的意思:</title>
  6.      <style type="text/css">
  7.          .box {
  8.              width: 500px;
  9.              height: 500px;
  10.              border: 1px solid black;
  11.  
  12.              background-image: url(img/2.png);
  13.              background-size: 100px 100px;
  14.              background-repeat: no-repeat;
  15.  
  16.              background-position: 30% 40%;
  17.          }
  18.      </style>
  19.  </head>
  20.  <body>
  21.  
  22.      <div class="box">
  23.  
  24.      </div>
  25.  </body>
  26.  </html>

显示:

----------------------

注意: 如果设置 padding为 100px  , 因为width是 500 * 500 , 那么此时 容器 是  700 * 700 ；

此时： 距离左上角: x 轴 (500 + 2X 100 - 100) * 30% = 180px;  距离 y 轴: (700 - 100 ) * 40% = 240px;

  1.  <!DOCTYPE html>
  2.  <html lang="zh-CN">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>background-position百分比表示的意思: + padding</title>
  6.      <style type="text/css">
  7.          .box {
  8.              width: 500px;
  9.              height: 500px;
  10.              border: 1px solid black;
  11.  
  12.              background-image: url(img/2.png);
  13.              background-size: 100px 100px;
  14.              background-repeat: no-repeat;
  15.  
  16.              background-position: 30% 40%;
  17.              padding: 100px;
  18.          }
  19.      </style>
  20.  </head>
  21.  <body>
  22.  
  23.      <div class="box">
  24.  
  25.      </div>
  26.  </body>
  27.  </html>

显示:

------------

 参考链接:

    你真的了解background-position

4) background-clip 和 background-origin 的区别:

第一:  background-origin 是针对 background-image , 规定 background-image 进行 绘制图片的时候的  的左边原点 是哪里 ,

　　　　border-box(边框的外边缘) ,  padding-box(paddng的外边缘 , 这是 默认值)  , content-box(内容的 外边缘)

第二: background-clip 是针对 背景(背景色 + 背景图) (已经绘制出来的图形 ,图片) 进行裁剪 ,显示一部分.

　　它定义的是从哪里开始裁剪 , border-box (默认) , padding-box , content-box

　　-----------

　　注意: background-color 默认是 在 border的外边缘;    background-image 默认是 在 padding的外边缘;

　　　　 同时 , background-clip 默认是 从border-box 开始裁剪 , 因此背景色 ,背景图 都 可以被完成的裁剪.

------------------------------

  1.  <!DOCTYPE html>
  2.  <html lang="zh-CN">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>background-image: 定位的起点默认是是padding的外边缘, 可以通过background-origin修改</title>
  6.      <style type="text/css">
  7.          .box {
  8.              width: 200px;
  9.              height: 200px;
  10.              border: 50px dotted black;
  11.  
  12.              background-color: red;
  13.              background-image: url(img/2.png);
  14.              background-size: 100px 100px;
  15.              background-repeat: no-repeat;
  16.  
  17.              padding: 50px;
  18.              margin-bottom: 20px;
  19.          }
  20.      </style>
  21.  </head>
  22.  <body>
  23.      <h2>原图</h2>
  24.      <div>
  25.          <img src="img/2.png" style="height: 100px ; width: 100px;" ?>
  26.      </div>
  27.  
  28.      <h2>正常: border-origin: padding-box; border-clip: border-box; <br>
  29.          此时 background-color:显示所有; background-image显示所有
  30.      </h2>
  31.      <div class="box">
  32.          1111
  33.      </div>
  34.      <h2>border-clip: padding-box;<br>
  35.          background-color:裁剪了一部分; background-image 显示所有
  36.      </h2>
  37.      <div class="box" style="background-clip: padding-box;">
  38.          1111
  39.      </div>
  40.  
  41.      <h2>border-clip: padding-box; background-origin: border-box;<br>
  42.          background-color:裁剪了一部分; background-image 显示一部分:
  43.      </h2>
  44.      <div class="box" style="background-clip: padding-box; background-origin: border-box;">
  45.          1111
  46.      </div>
  47.  
  48.      <h2>border-clip: content-box; background-origin: border-box;<br>
  49.          background-color:裁剪了一部分; background-image 完全被裁剪掉了:
  50.      </h2>
  51.      <div class="box" style="background-clip: content-box; background-origin: border-box;">
  52.          1111
  53.      </div>
  54.  
  55.      <h2>border-clip: content-box; background-origin: content-box;<br>
  56.          background-color:裁剪了一部分; background-image 显示所有:
  57.      </h2>
  58.      <div class="box" style="background-clip: content-box; background-origin: content-box;">
  59.          1111
  60.      </div>
  61.  </body>
  62.  </html>

显示:

--

-------

----------------

----------------

----------------

----------------------------

总结:

　　1. background-color 绘制 背景色 是 固定 的 从 border-box 开始的 .  并且 无法修改

　　2. background-image  绘制 背景图 是 默认 从 padding-box 开始的,   可以通过  background-origin 进行 修改.

　　　　注意: background-origin 只是对 background-image 产生效果.

　　3. background-clip 是 对背景色, 背景图 进行 裁剪, 显示 其中的一部分, 默认 是 从 border-box 开始 裁剪.

参考链接:

　　css3属性中background-clip与background-origin的用法释疑　　　

background 的一些 小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; 3) background-position定位百分比的计算方式: 4)background-clip 和 background-origin 的区别的更多相关文章

  1. 20190328-CSS样式一：字体样式font-、文本样式text-、背景图样式background-

    目录 CSS参考手册:http://css.doyoe.com/ 1.字体简写:font:font-style || font-variant || font-weight || font-size ...

  2. css3-background clip 和background origin

    1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...

  3. css 背景(background)属性、背景图定位

    background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

  4. background 设置文本框背景图

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

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

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

  6. background属性怎么添加2个或多个背景图

    最近遇到一个需求,下面充值金额按钮是一个背景图,点击之后显示的状态也是一个背景图,如下图      按照惯用的套路,新增一个class,点击后的状态直接写在里面即可 然而点击后,虽然状态背景成功显示出 ...

  7. css中的背景色渐变以及背景图的定位

    单纯的背景色渐变: background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fff), color-stop(1, #ddd) ...

  8. HTML中设置背景图的两种方式

    HTML中设置背景图的两种方式 1.background    background:url(images/search.png) no-repeat top; 2.background-image ...

  9. 2种不同方式实现背景图里加入文字的简单CSS样式

    如果让你实现下图的样式(图片里面插入文字),你会怎么做呢? 我总结了2种方式 ①:用 img src属性直接引入图片 + 定位 ②:用背景图且不使用定位 第一种: HTML <div class ...

随机推荐

  1. GPLT L2-014 列车调度

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805063166312448 分析:明显从右到左列车的序号需要依 ...

  2. jqGrid 刷新单行数据

    id: 单挑数据的id jQuery('#special-table').jqGrid( 'setRowData',id,{ status: '3', //所要修改的列 act: '<a dat ...

  3. leetcode-algorithms-18 4Sum

    leetcode-algorithms-18 4Sum Given an array nums of n integers and an integer target, are there eleme ...

  4. Leetcode 870. 优势洗牌

    870. 优势洗牌  显示英文描述 我的提交返回竞赛   用户通过次数49 用户尝试次数92 通过次数49 提交次数192 题目难度Medium 给定两个大小相等的数组 A 和 B,A 相对于 B 的 ...

  5. MIR7预制发票扣除已经预制的数量（每月多次预制，未即时过账）

    业务场景见抬头,有没有标准的解决方案就不说了,也没去考虑... 这个增强还是SAP老表提供的,感谢,省了不少时间. INCLUDE:LMR1MF6S 最后的位置 ENHANCEMENT ZMIR7_0 ...

  6. SAP 打开SAP物料帐期和财务账期

    引http://blog.sina.com.cn/s/blog_494f9a6b0102e8zw.html 物料账期:Tcode MMPV和Tcode MMRV 财务账期:Tcode OKP1  和O ...

  7. flex布局文本过长不显示省略号

    https://www.cnblogs.com/tgxh/p/6916930.html 解决方法: 给flex子元素添加css: white-space: nowrap; text-overflow: ...

  8. Vue keep-alive总结

    <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是 ...

  9. Linux下切换使用两个版本的JDK

    Linux下切换使用两个版本的JDK 我这里原来已经配置好过一个1.7版本的jdk. 输出命令: java -version [root@hu-hadoop1 sbin]# java -version ...

  10. CentOS中/英文环境切换教程（CentOS6.8）

    一.前言 对于不习惯英文的人可能想将系统由英文转成中文:而对于考虑客户端如果没正确配置,中文目录可能显示为乱码的人则可能宁愿将系统由中文转成英文. 中文切换为英文,实际就是将LANG的值由zh_CN- ...