一、CSS背景样式
1.背景样式
1.1 背景颜色
代码:background-color: red;
1.2 背景图片
代码:background-image: url(icon-s.jpg);
1.3 背景裁切
解释:该裁切比较有意思,其实就是图片显示的范围是否在边框显示,是否要显示在内边距里面,还是只是在内容区域(不太懂这个区域的请认真阅读前篇盒子模型)
选项 | 说明 |
---|---|
border-box | 边框以内都显示(包含边框、内边距、内容) |
padding-box | 内边距以内都显示(包含内边距、内容) |
content-box | 内容区域(包含内容) |
代码:background-clip: border-box;//默认就是这个
1.4 背景重复
解释:一般需要使用no-repeat这个属性
选项 | 说明 |
---|---|
repeat | 水平、垂直重复 |
repeat-x | 水平重复 |
repeat-y | 垂直重复 |
no-repeat | 不重复 |
space | 背景图片对称均匀分布 |
代码:background-repeat:repeat;//默认就是这个
1.5 背景滚动
解释:使用背景固定可以实现一种很好看的效果
选项 | 说明 |
---|---|
scroll | 背景滚动 |
fixed | 背景固定 |
代码:background-attachment: scroll;// 默认就是这个
1.6 背景位置
解释:原理是盒子不动,背景图片在背后移动(默认图片显示在左上角),相当于在盒子里面展示出露出来的内容;使用用处很大,可以布局图片显示,还可以把好多小图标放一个图片里面改变背景位置显示不同图标
选项 | 说明 |
---|---|
left | 左对齐 |
right | 右对齐 |
center | 居中对齐 |
top | 顶端对齐 |
bottom | 底部对齐 |
x y | 负值表示向右向下,正值表示向左向上 |
代码:background-position: center;background-position: 0 90px;// 水平 和 竖直
1.7 背景尺寸
解释:背景尺寸设置,默认图片按其大小只显示左上角(根据盒子大小显示)
选项 | 说明 |
---|---|
cover | 保持图像的纵横比并将图片缩放一部分,保证能填充满盒子,可能不会完整展示 |
contain | 保持图像的纵横比并将图片缩放保证能完整展示,可能会没有填充满整个盒子 |
x(宽 ) y(高) | 设置尺寸(可能会改变纵横比) |
50px auto | auto可以根据另一项设置的尺寸,保证auto所在这项与另一项尺寸想对应(即保持纵横比) |
代码:background-size: 100% 100%;//改变纵横比全填充进去;background-size:cover;
2.盒子阴影
解释:参数分别为水平偏移,垂直偏移,模糊度,颜色
代码:box-shadow: 10px 10px 5px rgba(100, 100, 100, .5);
3.颜色渐变
解释:代码主要为linear-gradient(red, green);
用的比较少,可以自行查询资料