CSS3新增背景属性（四）

CSS3新增背景属性

1 background-origin

设置背景图原点起始位置：

padding-box：默认值从padding区域开始显示背景图像；
border-box：从border区域开始显示背景图像；
content-box：从content区域开始显示背景图像。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>background-origin</title><style>div {height: 400px;width: 400px;padding: 30px;border: 20px dashed red;background-color: darkkhaki;margin: 0 auto;/* 引入图片 */background-image: url("../../1、CSS选择器/imgs/fengjing.png");/* 图片是否重复 */background-repeat: no-repeat;/* 图片起始位置 */background-origin: content-box;}</style>
</head><body><div></div>
</body></html>

1 background-clip

裁剪背景图。

padding-box：从padding区域开始向外裁剪背景图像；
border-box：默认值，从border区域开始向外裁剪背景图像；
content-box：从content区域开始向外裁剪背景图像；
text：背景图只呈现在文字上，需要加上-webkit-，而且要将文字设置为透明色。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>background-clip</title><style>div {height: 400px;width: 400px;padding: 30px;border: 20px dashed red;background-color: black;margin: 0 auto;background-image: url("../images/bg.jpg");background-repeat: no-repeat;background-origin: padding-box;font-size: 100px;text-align: center;line-height: 400px;color: transparent;/* -webkit-background-clip: text; */background-clip: content-box;}</style></style>
</head><body><div>文字</div>
</body></html>

3 background-size

设置背景图尺寸。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>background-size</title><style>div {height: 400px;width: 400px;border: 1px solid black;background-image: url("../images/bg.jpg");background-repeat: no-repeat;/* 用长度指定背景图片大小 *//* background-size: 400px 400px; *//* 用百分比指定图片大小  *//* background-size: 100% 100%; *//* 默认值,背景真实大小 *//* background-size: auto; *//* 等比缩放,使背景图片完全在容器内,可能导致一部分容器没有图片,以先满足的图片为准 *//* background-size: contain; *//* 等比缩放,使图片尽可能覆盖容器,有时图片可能显示不完整 */background-size: cover;}</style>
</head><body><div></div>
</body></html>

4 background复合属性

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>background-origin</title><style>div {height: 400px;width: 400px;padding: 30px;border: 20px dashed red;margin: 0 auto;/* background: color url repeat position / size orgin clip */background: rgb(146, 97, 97) url("../images/bg.jpg") 5px 5px / 100% 100% border-box content-box;}</style>
</head><body><div></div>
</body></html>

5 多背景图

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>多背景图</title><style>div {height: 400px;width: 400px;border: 1px solid black;background: url("../images/touxiang.png") no-repeat top left/ 20% 20%,url("../images/touxiang.png") no-repeat top right/ 20% 20%,url("../images/touxiang.png") no-repeat bottom left/ 20% 20%,url("../images/touxiang.png") no-repeat bottom right/ 20% 20%;}</style>
</head><body><div></div>
</body></html>