[CSS3] 使用边框和背景（设置元素的背景）
计算机专业在读生 从网络安全转向web前端
在线学习，分享笔记。
当前阅读书籍《HTML5权威指南》
欢迎您的来访，欢迎讨论交流，一起学习。
1.设置背景颜色和图像
设置元素背景的起点是设置背景颜色或者背景图像，也可以使用背景属性同时设置两者。
 p {border: medium solid black;background-color: lightgray;background-image: url(banana.png);background-size: 40px 40px;background-repeat: repeat-x; } banana图片使用了重复，使用background- repeat属性可实现。
background- repeat属性的值：
我们可以单独指定水平方向和垂直方向的重复样式，要是只有一个值的话，两个方向均会使用同种重复样式。
2.设置背景图像的尺寸
使用background- size可以调整图像尺寸。属性值可以为：长度值、百分数（跟图像的宽度和高度相关）、预定义值。
- contain值确保图像调整尺寸后，整个图像始终包含在元素内部。浏览器判断图像长度和高度哪个更大，并将较大者调整至容器相应宽度或者高度大小。
- 属性取cover值，浏览器选中较小的值，并沿着该方向调整图像大小。
- banana图像的高度比宽度大，使用cover值的时候，应该调整图像尺寸，使得宽度方向上能被完全显示，即使这会导致高度方向上显示不完整。
- 要是使用contain值，就必须确保高度方向能在元素盒子中完整呈现，即使最终图像不能覆盖整个背景区域。
3.设置背景图像位置
background- position属性：设置背景图像的位置。图像不平铺时用的最多。
 p { border: 10px double black; background-color: lightgray; background-image: url(banana.png); background-size: 40px 40px; background-repeat: no-repeat;background-position: 30px 10px; } ⚠️可使用长度单位指定，也可使用预定义值。
background- position属性值：
- 第一个值控制垂直位置，可以为top、bottom、center。
- 第二个值控制水平位置，可以为left、right、center。
4.设置元素的背景附着方式
textarea是常见的具有视窗的元素（详情请阅读），可以自动添加滚动条以显示内容。body元素，其中的内容比浏览器的窗口长，可以为其设置滚动条。
background- attachment属性：可以控制背景的附着方式。
background- attachment属性值：
 textarea { border: medium solid black; background-color: lightgray; background-image: url(banana.png); background-size: 60px 60px; background-repeat: repeat;background-attachment: scroll; } 5.设置背景图像的开始位置和裁剪样式
- 背景的起始点（origin）指定背景颜色和背景图像应用的位置。
- 裁剪样式决定了背景颜色和图像在元素盒子中绘制的区域。
background-origin属性：设置背景的起始点。
background-clip属性：设置裁剪样式。
background-origin和background-clip属性的值：
 p { border: 10px double black; background-color: lightgray; background-image: url(banana.png); background-size: 40px 40px; background-repeat: repeat;background-origin: border-box; }  p { border: 10px double black; background-color: lightgray; background-image: url(banana.png); background-size: 40px 40px; background-repeat: repeat; background-origin: border-box;background-clip: content-box; } 6.使用background简写属性
使用background简写属性可以在一条声明中设置所有的背景值：
background:   有些值可以省略。
 p { border: 10px double black;background: lightgray top right no-repeat border-box content-box local url(banana.png); }