CSS3 背景切割和大小（css3的背景和边框属性）
background-clip 属性
规定背景的绘制区域：
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
margin: 50px auto;
padding: 50px;
border: 50px solid rgba(255,0,0,0.5);
background-image: url(img/yangmi.jpg);
/*规定背景的绘制区域：*/
/*background-clip: border-box;*//*背景会填充到边框*/
/*background-clip: padding-box;*/
background-clip: content-box;
}
</style>
</head>
<body>
<div>我是文字啊啊啊啊</div>
</body>
</html>background-size 属性
background-size: length|percentage|cover|contain;
length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 1000px;
height: 427px;
margin: 50px auto;
border: 1px solid #000;
background-image: url(img/guoba.jpg);
background-repeat: no-repeat;
background-size: %(参考宽高)|px|contain|cover;
/*background-size: 1000px 427px;*/
/*background-size: 100% 100%;*/
/*按比例缩放背景图使其完全覆盖盒子 哪怕有些背景图显示不出来 也为所谓*/
background-size: cover;
/*等比例缩放背景图当一遍填满*/
/*background-size: contain;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
