下面都是我自己的理解, 如果有不对的地方, 还请大家帮忙指出.
下面是在 chrome 浏览器上测试的

background-clipbackground-origin

先说说background-image

background-image 默认的起始位置是 padding 外边缘的左上角. 如下图所示:

但是注意: 默认的结束位置却是 border 外边缘的右下角, 如下图所示:

如果想让起始位置变为 border 外边缘的左上角, 或者内容区域的左上角, 这时就是 background-origin 发挥作用的时候了.

background-origin

它的作用就是改变 background-image 左上角的起始位置.

它有三个值:

  • padding-box: 这是它的默认值, 指定 background-image 的左上角是 padding 外边缘的左上角.

  • border-box: 指定 background-image 的左上角是 border 外边缘的左上角.

  • content-box: 指定 background-image 的左上角是 内容区域 的左上角.

background-clip

它的作用是指定 background-colorbackground-image 的作用范围.

它也有三个值, 和 background-origin 一样的值.

  • border-box: 这是它的默认值, 表示超出 border 外边缘的部分将被裁掉. 如下图:

  • padding-box: 表示超出 padding 外边缘的部分将被裁掉. 如下图:

  • content-box: 表示超出内容区域范围的部分将被裁掉. 如下图:

本文转载于:猿2048➣https://www.mk2048.com/blog/blog.php?id=hhkjc0jaaaa

background-clip 和 background-origin的更多相关文章

  1. css3-background clip 和background origin

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

  2. compass模块

    Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/ ...

  3. CSS3详解:background

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  4. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  5. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  6. 第5章 css与背景相关的样式background

    background-origin 设置元素背景图片的原始起始位置. 语法: background-origin : border-box | padding-box | content-box; 参 ...

  7. css background 背景知识详解

    background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...

  8. 例子:Background Audio Streamer Sample

    The Background Audio Streamer sample demonstrates how to create an app that uses a MediaStreamSource ...

  9. #8.12.16总结#background transition、animation、transform

    background-origin 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat此属性才会生效. background-origin :bord ...

  10. How to tile small texture image onto page as its background

    You don’t need to set a big size image as the background of pages if the image is texture or uniform ...

随机推荐

  1. java 读取xlsx文件

    public class ReadExcel { public static void main(String[] args) { Workbook wb = null; Sheet sheet = ...

  2. JZ-060-把二叉树打印成多行

    把二叉树打印成多行 题目描述 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行. 题目链接: 把二叉树打印成多行 代码 import java.util.ArrayList; impor ...

  3. C# NPOI导出数据到Excel

    1 public void Export() 2 { 3 //创建工作簿对象 4 IWorkbook workbook = new XSSFWorkbook(); 5 6 ExportStatisti ...

  4. php模式的设计

    工厂模式是我们最常用的实例化对象模式,是用工厂方法代替new操作的一种模式. 工厂模式有一个关键的构造,根据一般原则命名为Factory的静态方法,然而这只是一种原则,虽然工厂方法可以任意命名这个静态 ...

  5. 【数据库】优化SQL语言

    第1章数据模型设计 第1条:确保所有表都有主键 [1]当表缺少主键时,会出现各种问题,所有表都必须有一列(或多列)设置为主键. [2]主键应当具备的特征 唯一性,值非空,不可变,尽可能简单 [3]不要 ...

  6. C++中vector::data()使用心得和对自定义类型指针运算符的默认重载

    一.C++ vector::data()函数 返回值类型:vector的基类 返回值:Returns a pointer such that [data(), data() + size()] is ...

  7. python3输出“水仙花数”

    for num in range(100,1000): #如果num在[100,1000)范围,就依次循环取出num的值,第一次取100,下一次取101....最后一次取999 bai = num / ...

  8. JSON.parse()和JSON.stringfy()区别

    JSON.parse() 用于从一个json格式字符串解析出json类型的数据,如: 注意事项:json格式字符串必须是写在一排的,且括号外面用单引号,里面的每一个字符串用双引号 JSON.strin ...

  9. linux下安装简单的文件上传与下载工具 lrzsz

    编译安装 1.从下面的网站下载 lrzsz-1.12.20.tar.gz wget https://ohse.de/uwe/releases/lrzsz-0.12.20.tar.gz 2.查看里面的I ...

  10. 台式机ATX电源:各接口定义、启动方法、电源特点

    ATX,英文全称:Advanced Technology Extended,是一种由Intel公司在1995年公布的PC机主板结构规范. ATX电源作用是把交流220V的电源转换为计算机内部使用的直流 ...