HTML5 06_CSS背景

一.CSS背景

1.背景颜色(background-color)

background-color属性设置一个元素的背景颜色，background-color属性设置一个元素的背景颜色

2.背景图片(background-image)

background-image属性设置一个元素的背景图像，默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向

3.背景平铺(background-repeat)

值	说明
repeat	背景图像将向垂直和水平方向重复
repeat-x	只有在水平方向会重复背景图像
repeat-y	只有在垂直方向会重复背景图像
no-repeat	不会重复

4.背景位置(background-position)

background-position属性设置背景图像的起始位置，取值有left、right、top、bottom、center，如果仅指定一个关键字，其他值将会是"center

5.背景附着(background-attachment)

值	说明
scroll	背景图片随页面的其余部分滚动。默认
fixed	背景图像是固定的

6.背景简写

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

7.透明

p{
 background:rgba(0,0,0,0.3);/*背景半透明*/
 color:rgba(255,0,0,0.3);/*文字透明*/
 border:1px solid rgba(255,0,0,0.5);/*边框透明*/ 
}

8.背景缩放

通过background-size设置背景图片的尺寸，其参数设置如下：

①可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高

②设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏

③设置为contain时，会自动调整缩放比例，保证图片始终完整显示在背景区域

9.插入图片和背景的区别

①插入图片在更改图片大小时使用属性 width 和 height ，更改图片位置使用 margin 或 padding 盒模型

②背景图片在更改图片大小时使用 background-size 属性，更改图片位置时使用background-position属性

③一般情况下背景图片适合做一些小图标使用，产品展示之类的就用插入图片

10.多背景

以逗号分隔可以设置多背景，可用于自适应布局，不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者

11.背景颜色渐变

gradients可以让你在两个或多个指定的颜色之间显示平稳的过渡

11.1.线性渐变(Linear Gradients)

p{
 background: linear-gradient(red, blue);
 /*从上到下的线性渐变*/
 background: linear-gradient(to right, red, yellow, blue, green);
 /*从左到右的线性渐变*/
 background: linear-gradient(to bottom right, red, blue);
 /*对角方向的线性渐变*/ 
}

11.2.径向渐变(Radial Gradients)

p{
 background: radial-gradient(red, green, blue);
 /*颜色结点均匀分布的径向渐变*/
 background: radial-gradient(red 5%, green 10%, blue 50%);
 /*颜色结点不均匀分布的径向渐变*/
 background: radial-gradient(circle, red, green, blue);
 /*形状为圆形的径向渐变*/ 
}

12.精灵图

为了节省网络资源，通常网页上小图标和图片都合成在一张图片上，到使用的时候再切图，在使用时我们需要查到目标图标大小，设置宽高，通过position调整位置，找到目标图标