[CSS3] 使用边框和背景（设置元素的背景）

计算机专业在读生从网络安全转向web前端

在线学习，分享笔记。

当前阅读书籍《HTML5权威指南》

欢迎您的来访，欢迎讨论交流，一起学习。

1.设置背景颜色和图像

设置元素背景的起点是设置背景颜色或者背景图像，也可以使用背景属性同时设置两者。

<style type="text/css"> 
p {
border: medium solid black;
background-color: lightgray;
background-image: url(banana.png);
background-size: 40px 40px;
background-repeat: repeat-x;
} 
</style>
<！--将背景颜色设置为浅灰色，使用URL记载了一张banana.png的图片作为background- image属性的值。-->

banana图片使用了重复，使用background- repeat属性可实现。

background- repeat属性的值：

我们可以单独指定水平方向和垂直方向的重复样式，要是只有一个值的话，两个方向均会使用同种重复样式。

2.设置背景图像的尺寸

使用background- size可以调整图像尺寸。属性值可以为：长度值、百分数（跟图像的宽度和高度相关）、预定义值。

contain值确保图像调整尺寸后，整个图像始终包含在元素内部。浏览器判断图像长度和高度哪个更大，并将较大者调整至容器相应宽度或者高度大小。
属性取cover值，浏览器选中较小的值，并沿着该方向调整图像大小。

banana图像的高度比宽度大，使用cover值的时候，应该调整图像尺寸，使得宽度方向上能被完全显示，即使这会导致高度方向上显示不完整。
要是使用contain值，就必须确保高度方向能在元素盒子中完整呈现，即使最终图像不能覆盖整个背景区域。

3.设置背景图像位置

background- position属性：设置背景图像的位置。图像不平铺时用的最多。

<style type="text/css"> 
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;
} 
</style>
<!--设置距离左边界30px，距离顶部边界10px。-->

⚠️可使用长度单位指定，也可使用预定义值。

background- position属性值：

第一个值控制垂直位置，可以为top、bottom、center。
第二个值控制水平位置，可以为left、right、center。

4.设置元素的背景附着方式

textarea是常见的具有视窗的元素（详情请阅读），可以自动添加滚动条以显示内容。body元素，其中的内容比浏览器的窗口长，可以为其设置滚动条。

background- attachment属性：可以控制背景的附着方式。

background- attachment属性值：

<style type="text/css"> 
textarea { 
border: medium solid black; 
background-color: lightgray; 
background-image: url(banana.png); 
background-size: 60px 60px; 
background-repeat: repeat;
background-attachment: scroll;
} 
</style>

5.设置背景图像的开始位置和裁剪样式

背景的起始点（origin）指定背景颜色和背景图像应用的位置。
裁剪样式决定了背景颜色和图像在元素盒子中绘制的区域。

background-origin属性：设置背景的起始点。

background-clip属性：设置裁剪样式。

background-origin和background-clip属性的值：

 <style type="text/css"> 
p { 
border: 10px double black; 
background-color: lightgray; 
background-image: url(banana.png); 
background-size: 40px 40px; 
background-repeat: repeat;
background-origin: border-box;
} 
</style><style type="text/css"> 
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;
} 
</style>

6.使用background简写属性

使用background简写属性可以在一条声明中设置所有的背景值：

background: <background-color> <background-position> <background-size>     <background-repeat> <background-origin> <background-clip> <background-attachment>     <background-image>

有些值可以省略。

<style type="text/css"> 
p { 
border: 10px double black;
background: lightgray top right no-repeat border-box content-box local url(banana.png);     }
</style>