新增的背景属性
| 属性 | 功能 |
|---|---|
| backgroun-clip | 指定背景的显示范围 |
| background-origin | 指定绘制背景图像时的起点 |
| background-size | 指定背景中图像的尺寸 |
| background-break | 指定内联元素的背景图像进行平铺时的循环方式 |
1.background-clip属性
（1）作用
主要是用来控制背景显示区域
background-clip：border-box||padding-box||content-box
（2）分类
| 名称 | 作用 |
|---|---|
| border-box | 此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉 |
| padding-box | 背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉 |
| content-box | 背景从content区域向外裁剪，超出content区域的背景将被裁剪掉 |
3.举例
- <1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中新增的background-clip属性</title>
<style>
div{
background-color: grey;
width:300px;
height:150px;
border: dashed 30px blueviolet;
padding:30px;
background-clip: content-box;
}
</style>
</head>
<body>
<h1>CSS3中新增的background-clip属性</h1>
<div>CSS3中新增的background-clip属性</div>
</body>
- <2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中新增的background-clip属性</title>
<style>
div{
background-color: grey;
width:300px;
height:150px;
border: dashed 30px blueviolet;
padding:30px;
background-clip: border-box;
}
</style>
</head>
<body>
<h1>CSS3中新增的background-clip属性</h1>
<div>CSS3中新增的background-clip属性</div>
</body>
</html>
- <3>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中新增的background-clip属性</title>
<style>
div{
background-color: grey;
width:300px;
height:150px;
border: dashed 30px blueviolet;
padding:30px;
background-clip:padding-box;
}
</style>
</head>
<body>
<h1>CSS3中新增的background-clip属性</h1>
<div>CSS3中新增的background-clip属性</div>
</body>
</html>
4.ps
2.background-origin属性指定绘制背景图像的绘制起点
（1）作用
在绘制背景图像时，默认是从内补白（padding）区域的左上角开始绘制的，但是可以利用background-origin属性来指导绘制时从边框左上角开始绘制，或者是从内容的左上角开始绘制。
tip：为了兼容新老版本的浏览器，最好在使用该属性时，将新老语法一起用上，老语法在前，新语法在后。
background-origin：padding || border || content
background-origin：padding-box || border-box || content-box
（2）分类
| 名称 | 作用 |
|---|---|
| padding-box(padding) | 此值为background-origin的默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片 |
| border-box（border） | 此值决定background-position起始位置从border的外边缘开始显示背景图片 |
| content-box（content） | 此值决定background-position起始位置从content的外边缘（padding的内边缘）开始显示背景图片 |
3.举例
- <1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中新增的background-origin属性</title>
<style>
div{
width:600px;
height:300px;
background-image:url("bj.png");
background-repeat: no-repeat;
border:dashed 30px green;
padding:30px;
}
</style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>
- <2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中新增的background-origin属性</title>
<style>
div{
width:600px;
height:300px;
background-image:url("bj.png");
background-repeat: no-repeat;
border:dashed 30px green;
padding:30px;
background-origin: border-box;
}
</style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>
4.提示
background-origin虽然现代浏览器都支持，但在不同的内核浏览器下还是需要带上各自的前缀，这样在实际应用中最好接下面的语法规则书写，以保证background-origin的都能正常运行
background-size属性指定背景图像的尺寸
1.使用方法
background-size：auto|| < length > || < percentage > || cover || contain
2.分类
| 名称 | 作用 |
|---|---|
| auto | 为默认值，保持背景图片的原始高度和宽度 |
| length | 设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为“auto” |
| percentage | 以父元素的百分比来设置背景图片的宽度和高度，第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为“auto” |
| cover | 此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover，将背景元素放大到适合容器的大小，但这种方法会使背景图片失真 |
3.举例
- <1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中新增的background-origin属性</title>
<style>
div{
width:600px;
height:300px;
background-image:url("bj.png");
background-repeat: no-repeat;
border:dashed 30px green;
padding:30px;
background-origin: content-box;
background-size: auto;
}
</style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>
- <2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中新增的background-origin属性</title>
<style>
div{
width:600px;
height:300px;
background-image:url("bj.png");
background-repeat: no-repeat;
border:dashed 30px green;
padding:30px;
background-origin: content-box;
background-size:600px 300px;
}
</style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>
ps:这样会造成图片失真
- <3>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中新增的background-origin属性</title>
<style>
div{
width:600px;
height:300px;
background-image:url("bj.png");
background-repeat: no-repeat;
border:dashed 30px green;
padding:30px;
background-origin: content-box;
background-size:600px;
}
</style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>
ps：这种会保持原有的宽高比，但是这样就会造成效果更佳的错乱
<4>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中新增的background-origin属性</title>
<style>
div{
width:600px;
height:300px;
background-image:url("bj.png");
background-repeat: no-repeat;
border:dashed 30px green;
padding:30px;
background-origin: content-box;
background-size:50% 50%;
}
</style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>
- <4>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中新增的background-origin属性</title>
<style>
div{
width:600px;
height:300px;
background-image:url("bj.png");
background-repeat: no-repeat;
border:dashed 30px green;
padding:30px;
background-origin: content-box;
background-size:50%;
}
</style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>
- <5>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中新增的background-origin属性</title>
<style>
div{
width:600px;
height:300px;
background-image:url("bj.png");
background-repeat: no-repeat;
border:dashed 30px green;
padding:30px;
background-origin: content-box;
background-size:cover;
}
</style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>
- <6>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中新增的background-origin属性</title>
<style>
div{
width:600px;
height:300px;
background-image:url("bj.png");
background-repeat: no-repeat;
border:dashed 30px green;
padding:30px;
background-origin: content-box;
background-size:contain;
}
</style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>
4.兼容的浏览器
background-size和其他一些CSS3属性一样，需要加上自己的别名。
background-break属性指定背景图像的尺寸
1.概念
CSS3里标签元素能被分在不同区域（如：让内联元素span跨多行），background-break属性能够控制背景在不同区域显示。
2.分类
| 名称 | 作用 |
|---|---|
| background-break：continuous | 此属性是默认值，忽视区域之间的间隔空隙（给它们应用图片就好像把它们看成一个小区域一样） |
| background-break：bounding-box | 重新考虑区域之间的间隔 |
| background-break：each-box | 对每一个独立的标签区域进行背景的重新划分 |
一个元素中显示多个背景图像
**1.**在CSS3中一个元素可以显示多个背景图像，还可以将多个背景图像进行重叠显示，这样可以让我们对背景中所用素材的调整变得更加容易。
2.使用方法
background-image：url（1.png），url（2.png），url（3.png）；
tip：图层的排序方法：浏览器中显示时叠放的顺序从上往下指定的，第一个图像文件是放在最上面的，最后的指定文件是放在最下面的。
3.例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在一个元素中显示多个背景图像</title>
<style>
div{
margin:0;
padding:0;
width:1000px;
height:800px;
background-image: url("bj4.png"),url("bj3.png"),url("bj2.png"),url("bj1.png");
background-repeat: no-repeat;/*让图片不要重复*/
background-position: center;/*让图片位于中间*/
}
</style>
</head>
<body>
<h1>在一个元素中显示多个背景图像</h1>
<div></div>
</body>
</html>
203
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
