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:

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <title>background-color: 定位的起点是 border的外边缘</title>

     <style type="text/css">

         .box {

             width: 200px;

             height: 200px;

             border: 50px solid transparent;

             background-color: red;

             /*background-image: url(img/2.png);

             background-size: 100px 100px;

             background-repeat: no-repeat;*/

             padding: 50px;

         }

     </style>

 </head>

 <body>

     <div class="box">

         1111

     </div>

 </body>

 </html>

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

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

显示

如果 border 不设置为透明:

----------

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

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

2) background-image

覆盖的范围是 width + padding

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <title>background-image: 定位的起点默认是是padding的外边缘, 可以通过background-origin修改</title>

     <style type="text/css">

         .box {

             width: 200px;

             height: 200px;

             border: 50px solid transparent;

             background-color: red;

             background-image: url(img/2.png);

             background-size: 100px 100px;

             background-repeat: no-repeat;

             padding: 50px;

         }

     </style>

 </head>

 <body>

     <div class="box">

         1111

     </div>

 </body>

 </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;

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

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <title>background-position百分比表示的意思:</title>

     <style type="text/css">

         .box {

             width: 500px;

             height: 500px;

             border: 1px solid black;

             background-image: url(img/2.png);

             background-size: 100px 100px;

             background-repeat: no-repeat;

             background-position: 30% 40%;

         }

     </style>

 </head>

 <body>

     <div class="box">

     </div>

 </body>

 </html>

显示:

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

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

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

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <title>background-position百分比表示的意思: + padding</title>

     <style type="text/css">

         .box {

             width: 500px;

             height: 500px;

             border: 1px solid black;

             background-image: url(img/2.png);

             background-size: 100px 100px;

             background-repeat: no-repeat;

             background-position: 30% 40%;

             padding: 100px;

         }

     </style>

 </head>

 <body>

     <div class="box">

     </div>

 </body>

 </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 开始裁剪 , 因此背景色 ,背景图都可以被完成的裁剪.

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

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <title>background-image: 定位的起点默认是是padding的外边缘, 可以通过background-origin修改</title>

     <style type="text/css">

         .box {

             width: 200px;

             height: 200px;

             border: 50px dotted black;

             background-color: red;

             background-image: url(img/2.png);

             background-size: 100px 100px;

             background-repeat: no-repeat;

             padding: 50px;

             margin-bottom: 20px;

         }

     </style>

 </head>

 <body>

     <h2>原图</h2>

     <div>

         <img src="img/2.png" style="height: 100px ; width: 100px;" ?>

     </div>

     <h2>正常: border-origin: padding-box; border-clip: border-box; <br>

         此时 background-color:显示所有; background-image显示所有

     </h2>

     <div class="box">

         1111

     </div>

     <h2>border-clip: padding-box;<br>

         background-color:裁剪了一部分; background-image 显示所有

     </h2>

     <div class="box" style="background-clip: padding-box;">

         1111

     </div>

     <h2>border-clip: padding-box; background-origin: border-box;<br>

         background-color:裁剪了一部分; background-image 显示一部分:

     </h2>

     <div class="box" style="background-clip: padding-box; background-origin: border-box;">

         1111

     </div>

     <h2>border-clip: content-box; background-origin: border-box;<br>

         background-color:裁剪了一部分; background-image 完全被裁剪掉了:

     </h2>

     <div class="box" style="background-clip: content-box; background-origin: border-box;">

         1111

     </div>

     <h2>border-clip: content-box; background-origin: content-box;<br>

         background-color:裁剪了一部分; background-image 显示所有:

     </h2>

     <div class="box" style="background-clip: content-box; background-origin: content-box;">

         1111

     </div>

 </body>

 </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 的区别的更多相关文章

20190328-CSS样式一：字体样式font-、文本样式text-、背景图样式background-
目录 CSS参考手册:http://css.doyoe.com/ 1.字体简写:font:font-style || font-variant || font-weight || font-size ...
css3-background clip 和background origin
1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...
css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
background 设置文本框背景图
background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. ...
全屏背景图的实现及background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) ...
background属性怎么添加2个或多个背景图
最近遇到一个需求,下面充值金额按钮是一个背景图,点击之后显示的状态也是一个背景图,如下图按照惯用的套路,新增一个class,点击后的状态直接写在里面即可然而点击后,虽然状态背景成功显示出 ...
css中的背景色渐变以及背景图的定位
单纯的背景色渐变: background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fff), color-stop(1, #ddd) ...
HTML中设置背景图的两种方式
HTML中设置背景图的两种方式 1.background background:url(images/search.png) no-repeat top; 2.background-image ...
2种不同方式实现背景图里加入文字的简单CSS样式
如果让你实现下图的样式(图片里面插入文字),你会怎么做呢? 我总结了2种方式 ①:用 img src属性直接引入图片 + 定位 ②:用背景图且不使用定位第一种: HTML <div class ...

随机推荐

更改 Windows 软件默认安装位置教程
在打开的“运行”窗口中,输入命令regedit,然后点击确定按钮计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion 百度 ...
ie8不支持currentTarget的解决办法
一般绑定事件时,我们都会在事件回调方法里用event.currentTarget获取当前对象,但到ie8里就获取不到了. 解决方法如下: var eve = event || window.event ...
hive的jdbc使用
①新建maven项目,加载依赖包在pom.xml中添加 <dependency> <groupId>jdk.tools</groupId> <artifa ...
把xml转成javabean的工具类
import java.io.IOException; import java.io.StringReader; import java.io.StringWriter; import javax.x ...
zend framwork项目基本操作
1.首先,我们做项目是采用db的方式来编写sql语句的. 2.查询: fetchOne() 查询一个字段,如果没有指定就只查询第一个字段,只能得到一个值. fetchRow() 查询一行数据 ...
基于js的CURD插件
前言: 每个web程序对数据库的创建(Create).更新(Update).读取(Retrieve)和删除(Delete)操作都是必不可少的,于是我决定开发一个基于JavaScript和jQuery框 ...
Jquery中.attr()和.data()的区别
$.attr()和$.data()本质上属于DOM属性和Jquery对象属性的区别. 一个简单的例子 <!DOCTYPE html> <html> <head> & ...
如何把一个杯子卖到上万元，不学你就OUT了
我们可以看看一个产品卖到多少钱需要占有什么样的资源: 第1种卖法:卖产品本身的使用价值,只能卖3元/个如果你将他仅仅当一只普通的杯子,放在普通的商店,用普通的销售方法,也许它最多只能卖3元钱,还可能 ...
Java中static的用法，初始化块
使用 Arrays 类操作 Java 中的数组语法: Arrays.sort(数组名); 可以使用 sort( ) 方法实现对数组的排序,只要将数组名放在 sort( ) 方法的括号中,就可以完成对该 ...
Vscode extensions开发
Vscode extensions开发 1◆ generatorcode install npm install -g yo generator-code 2◆ 步骤 yo code ...

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

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

2. 设置多个背景图像

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

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

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

随机推荐

热门专题

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

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