一.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调整位置,找到目标图标