1.background-origin

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

border-box,padding-box,content-box从边框,还是内边距(默认值),或者是内容区域开始显示。

代码演示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style type="text/css">
.wrap {
width:220px;
border:10px dashed salmon;
padding:20px;
font-weight:bold;
color:#;
background:#ccc url(.png) no-repeat;
background-origin: border-box;
position: relative;
}
.content {
height:80px;
border:1px solid #;
} </style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
</div>
</body>
</html>

插入的图片放在本地:

效果如图:

(1)padding-box

(2)content-box

(3)border-box

2.background cllip

用来将背景图片做适当的裁剪以适应实际需要。

语法:

background-clip : border-box | padding-box | content-box | no-clip

代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景原点</title>
<style type="text/css">
.wrap {
width:220px;
border:10px dashed salmon;
padding:20px;
font-weight:bold;
color:#;
background:#ccc url(.png) no-repeat; background-clip:border-box;/* 改变background的值, border-box | padding-box | content-box | no-clip */
position: relative; } .content { height:80px; border:1px solid #; } </style> </head> <body> <div class="wrap"> <div class="content">content</div> </div> </body> </html>
效果如图:
(1)border-box

图片没有从左边框开始
(2)padding-box

(3)content-box

(4)backround clip 和background origin的区别

background-clip的真正作用是决定背景在哪些区域显示。

background-origin是指背景显示的区域,或者说背景是从哪个区域开始绘制的(边框、补白或内容区域)

background origin

(1)padding-box

(2)content-box

(3)border-box

background clip

(1)border-box

图片没有从左边框开始
(2)padding-box

(3)content-box

从上面的6个效果图可以看出,background origin 的图片是从边框,内边距,内容开始的,背景颜色没有变化,而background clip 的图片显示在边框,内边距,内容中,背景颜色有变化,背景颜色分别从边框,内边距,内容开始,没有的地方空白

ps:注意看背景颜色的变化

												

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

  1. CSS3详解:background

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

  2. css3整理--clip

    clip语法: .selector { clip: rect | auto | inherit } 注意:clip属性只能在元素设置了“position:absolute”或者“position:fi ...

  3. css3中clip属性

    clip 属性用来设置元素的形状.用来剪裁绝对定位元素. 当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许规定一个元素的可见尺寸,这样此元素就会被修剪并显示在这个元素中. ...

  4. css3属性clip

    clip 属性定义了元素的哪一部分是可见的.clip 属性只适用于 position:absolute 的元素. rect(<top>, <right>, <bottom ...

  5. compass模块

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

  6. css2和CSS3的background属性简写

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

  7. CSS3中background属性的调整

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

  8. css3 background

    background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...

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

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

随机推荐

  1. SpringMVC中mvc:view-controller的使用

    1.重定向 <mvc:view-controller path="/" view-name="redirect:/admin/index"/> 即如 ...

  2. 各种sort排序总结

    冒泡排序 选择排序 插入排序

  3. Python学习之==>内置函数、列表生成式、三元表达式

    一.内置函数 所谓内置函数就是Python自带的函数 print(all([0,2,3,4])) #判断可迭代的对象里面的值是否都为真 print(any([0,1,2,3,4])) #判断可迭代的对 ...

  4. Oracle 查询库文件信息

    --.查看Oracle数据库中数据文件信息的命令方法 select b.file_name 物理文件名, b.tablespace_name 表空间, b.bytes// 大小M, (b.bytes- ...

  5. 转:【开源必备】常用git命令

    原文:https://zhuanlan.zhihu.com/p/25868120 [开源必备]常用git命令 [已重置]   如今在技术领域,码农们习惯了开源,也离不开免费开源的代码,轻松获取代码,不 ...

  6. win10在文件夹下打开powershell

    快捷键win+R,输入cmd可以直接打开终端命令行窗口 在文件夹下打开终端命令行端口: 在需要的文件夹目录下,按住shift键,在空白处右击,选择在此处打开powershell窗口,即可进行终端命令行 ...

  7. 4.站点克隆wget----隐写术图片----backbox linux

    站点克隆wget sudo bash cd Desktop/Cloned wget -h clear wget -mk https://help.ubuntu.com/ 隐写术图片 想想朋友圈的图片 ...

  8. 无法在发送 HTTP 标头之后进行重定向

    public ActionResult Index2() { Response.Buffer = true; Response.Clear(); return Redirect("/Wech ...

  9. dbvisualizer安装

    1. 下载DbVisualizer安装包. 2.解压. 无论是哪个版本的dbvisualizer破解版, 都可以找到安装程序(例dbvis_windows-x64_10_0_10.exe), dbvi ...

  10. 根据对象属性查找对象或者数组(根据对象属性查找某数组内符合该条件的对象,数组内对象属性check为true的对象,存放到数组内) 滚动轴样式

      1.根据对象属性查找某数组内符合该条件的对象. optionComwords:[ {optionName:"名称1", optionCode: '1'}, {optionNam ...