web基础学习（七）CSS3的background-origin、background-clip、resize

最新推荐文章于 2023-04-26 00:07:25 发布

June.1

最新推荐文章于 2023-04-26 00:07:25 发布

阅读量358

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web基础 web前端文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_39043923/article/details/88947263

web前端同时被 2 个专栏收录

17 篇文章

订阅专栏

web基础

15 篇文章

订阅专栏

本文介绍了CSS中background-clip和background-origin属性的应用方法，包括如何定义背景图像的绘制及定位区域，以及resize属性用于允许用户调整元素尺寸的用法。通过示例展示了不同属性值的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. background-clip 指定背景图像的绘画区域

background-clip: border-box|padding-box|content-box; 属性前提设置背景

border-box ：默认属性,背景包含边框内边距和内容
padding-box：背景不包含边框,但包含内边距和内容
content-box：背景不包含边框,内边距,只包含内容

2. background-origin 背景图像的定位区域

background-origin: padding-box|border-box|content-box; 属性前提设置背景图片,与上面方法相同,区别在于图片和普通背景

border-box ：默认属性,背景图片包含边框内边距和内容
padding-box：背景图片不包含边框,但包含内边距和内容
content-box：背景图片不包含边框,内边距,只包含内容

3. resize 是否由用户调整元素尺寸

resize: none|both|horizontal|vertical; 此属性用户界面出现一个可以拉动的小三角.如果希望此属性生效需要设置元素的overflow属性,值可以是auto、hidden、scroll

none 用户无法调整元素的尺寸
both 用户可调整元素的高度和宽度
horizontal 用户可调整元素的宽度
vertical 用户可调整元素的高度
以下是实战示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.box{
		width: 200px;
		height: 200px;
		padding: 50px;
		border: 30px dashed black;
		
		background-color: yellow;
		/*背景不包含边框,内边距,只包含内容*/
		background-clip: content-box;
	}
	.box2{
		width: 200px;
		height: 200px;
		padding: 50px;
		border: 30px dashed black;
		background: url('images/shop_ico_06.gif') no-repeat;
		background-size: 100%;
		/*设置背景图片不包含边框,但包含内边距和内容*/
		background-origin: padding-box;
		/*设置更改尺寸的图像*/
		resize: vertical;
		overflow: hidden;
	}
	.box3{
		width: 500px;
		height: 500px;
		border: 2px solid black;
		/*css3多个背景的设置*/
		background: url('images/shop_ico_06.gif') no-repeat center center,
					url('images/blackboard.jpg') no-repeat;
	}
	</style>
</head>
<body>
	<div class="box">
	</div>
	<div class="box2"></div>
	<div class="box3">

	</div>
</body>
</html>