背景图像区域与背景图像定位

最新推荐文章于 2024-04-19 09:39:59 发布

purple_lumpy

最新推荐文章于 2024-04-19 09:39:59 发布

阅读量1.1k

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/purple_lumpy/article/details/81320280

版权

css3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

background-clip 属性（IE9+，其他都兼容）

该属性指定了背景图像的绘制区域

语法：

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

其中，border-box 为背景裁剪到边框盒(边框、内边距、内容都显示背景图片)，padding-box为背景裁剪到内边距框(内边距、内容都显示背景图片)，content-box为背景裁剪到内容框(仅内容显示背景图片)。

<!DOCTYPE html>
<html>
<head>
	<title>背景图像区域</title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 800px;
			height: 400px;
			padding: 50px;
			border: 50px solid transparent;
			background: url('./imgs/lion.png') no-repeat center center;
			background-clip: border-box;
			background-clip: padding-box;
			background-clip: content-box;
		}
	</style>
</head>
<body>
	<div></div>

</body>
</html>

background-origin 属性（IE9+ Firefox4+ chrome safari5+ opera）

该属性设置元素背景图片的原始起始位置。其指定background-position属性对应的相对位置。

语法：

background-origin：padding-box|border-box|content-box;

通过以上三个值，分别规定了background-position的相对偏移的原点。

	<style type="text/css">
		div{
			width: 800px;
			height: 400px;
			padding: 50px;
			border: 50px solid transparent;
			background: url('./imgs/lion.png') no-repeat 50px 100px;
			background-origin: border-box;
			background-origin: padding-box;
			background-origin: content-box;
		}
	</style>