文档章节

css3中background-clip和background-origin的区别

zfx2016
 zfx2016
发布于 2016/10/19 11:42
字数 474
阅读 11
收藏 0

在css3中,background-clip和background-origin实现的效果有时候是很相似的,所以有时候会很容易就把这两个属性弄混。

background-clip是从盒子的内边框开始显示图片,然后根据你设置的属性来决定裁剪的范围,并不会影响图片开始显示的位置;

而background-origin不会影响图片的显示范围,它只是单纯控制图片开始显示的那个位置,即图片左上角坐标的点。


下面用一段简单的代码来测试一下,首先测试background-clip

<pre name="code" class="html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				float: left;
				border: 10px dashed red;
				width: 100px;
				height: 100px;
				margin: 20px 20px;
				padding: 50px;
				background: gray url(img/bg.png) no-repeat;
			}
			p{
				font-size: 20px;
				color: #fff;
			}
			.border{
				background-clip: border-box;
			}
			.padding{
				background-clip: padding-box;
			}
			.content{
				background-clip: content-box;
			}
			
		</style>
	</head>
	<body>
		<div class="border">
			<p>border</p>
		</div>
		<div class="padding">
			<p>padding</p>
		</div>
		<div class="content">
			<p>content</p>
		</div>
	</body>
</html>


可以看到,图片上的白点的位置是没有发生改变的,只是在背景上的范围被裁剪了而已,所以background-clip属性影响的图片在背景上显示的范围大小而不会影响它处在背景上的位置。那么接下来看background-origin属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				float: left;
				border: 10px dashed red;
				width: 100px;
				height: 100px;
				margin: 20px 20px;
				padding: 50px;
				background: gray url(img/bg.png) no-repeat;
			}
			p{
				font-size: 20px;
				color: #fff;
			}
			.border{
				background-origin: border-box;
			}
			.padding{
				background-origin: padding-box;
			}
			.content{
				background-origin: content-box;
			}
			
		</style>
	</head>
	<body>
		<div class="border">
			<p>border</p>
		</div>
		<div class="padding">
			<p>padding</p>
		</div>
		<div class="content">
			<p>content</p>
		</div>
	</body>
</html>


大家看图片中白点的位置已经发生了变化,因为此时背景图片显示的起始位置已经发生了变化,左上方没有显示图片并不是因为被裁剪,而是因为起点位置在更下面的地方,所以那里没有显示图片而已。

© 著作权归作者所有

zfx2016
粉丝 1
博文 22
码字总数 14027
作品 0
广州
前端工程师
私信 提问
CSS3的background-clip属性

background-clip控制的不仅仅是背景图片,而是控制整个元素背景的显示范围,根据图5.6,读者应该可以很快地发现,3幅图的背景是没有变化的,只是显示的区域不同。第1幅即使在边框部分也显示背...

柯南和由美
2014/12/04
549
0
CSS3详解:background

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

DanielYue
2016/07/14
0
0
前端设计师必知的background属性(有CSS3内容)

回顾 css2中有五个与背景相关的属性。它们是: background-color: 完全填充背景的颜色 background-image: 用作背景的图片 background-position: 确定背景图片的位置 background-repeat: 确定...

黑魔法
2016/07/19
61
0
css 背景样式 background

background-color: 指定填充背景的颜色。 background-image: 引用图片作为背景。 background-position: 指定元素背景图片的位置。 background-repeat: 决定是否重复背景图片。 background-a...

Jack088
2015/03/24
312
0
CSS background 属性

CSS background 属性 定义和用法 background 简写属性在一个声明中设置所有的背景属性。 可以设置如下属性: background-color background-position background-size background-repeat bac...

ke_ry
2016/09/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JS 打印控制

JS 打印控制 var PrintStartString = "<!--打印开始标示符-->";//设置打印开始区域var PrintEndString = "<!--打印结束标示符-->";//设置打印结束区域var HtmlText = window.do......

DrChenXX
12分钟前
5
0
LevelDB:使用介绍

LevelDB 提供的接口其实很简单,下面举例进行简单说明。 安装 git clone https://github.com/google/leveldb cd leveldb mkdir -p build && cd build cmake -DCMAKE_BUILD_TYPE=Release .. ......

slagga
17分钟前
5
0
《JavaScript正则表达式迷你书》读书笔记

正则基础 常见简写形式 字符组 具体含义 记忆方式 \d 表示 [0-9]。表示是一位数字。 其英文是 digit(数字) \D 表示 [^0-9]。表示除数字外的任意字符。 \w 表示 [0-9a-zA-Z_]。表示数字、大小...

muzi131313
22分钟前
4
0
Git的反悔操作

概述 这次主要来讲讲Git的反悔操作,自己平时在写代码的过程中经常会出现想要弃用所有的改动或回滚到上一次commit的情况。Git上的反悔操作有reset、rebase、revert等,每个操作各有区别和对应...

duduYZ
23分钟前
2
0
实现双向绑定Proxy比defineproperty优劣如何?

前言 双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素之一. Vue三要素 响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向...

寻找海蓝
35分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部