10 CSS的背景
2019-12-12 本文已影响0人
CurryCoder
技术交流QQ群:1027579432，欢迎你的加入！
欢迎关注我的微信公众号：CurryCoder的程序人生
- 通过CSS背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
1.背景颜色
- background-color属性定义了元素的背景颜色，语法格式如下：
background-color: 颜色值; - 一般情况下，元素背景颜色的默认值是transparent(透明)，也可以通过手动指定背景颜色设置为透明色。
2.背景图片
- background-image属性描述了元素的背景图像。实际开发中常用于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。(精灵图也是一种运用场景)
- 语法格式：
background-image: none或者url(具体的url地址);
背景图片.png
3.背景平铺
- 如果需要在HTML页面上对背景图片进行平铺，可以使用background-repeat属性实现。
- 语法格式：
background-repeat: repeat或者no-repeat或者repeat-x或者repeat-y;
背景平铺.png
4.背景图片位置[重点]
- 利用background-position属性可以改变图片在背景中的位置。
- 语法格式：
background-position: x y; - 参数含义：x坐标和y坐标。可以使用方位名词或者精确单位
背景图片位置.png
4.1 参数是方位名词
- 如果指定的两个值都是方位名词，则两个值的先后顺序无关，例如left top和top left效果一样的。
- 如果只指定一个方位名词，另一个省略，则第二个值默认是居中对齐的。
4.2 参数是精确单位
- 如果参数值是精确单位，那么第一个肯定是x坐标，第二个肯定是y坐标；
- 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中；
4.3 参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。
5.背景图像固定(背景附着)
- background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
- background-attachment后期可以制作视差滚动的效果。
- 语法格式：
background-attachment: scroll(默认值) 或者 fixed;
背景图像固定.png
6.背景属性复合写法
- 为了简化背景属性的代码，可以将这些属性合并简写在同一个属性background中，从而节约代码量。
- 当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; - 实际开发中，更提倡的写法：
background: transparent url(image.jpg) repeat-y fixed top;
7.背景颜色半透明
- CSS3为我们提供了背景颜色半透明的效果。
- 语法格式：
background: rgba(0, 0, 0, 0.3); - 上面的语法格式中，最后一个参数a是alpha透明度的简写，它的取值范围是0到1之间。
- 习惯上，我们把0.3中的0省略掉，写成background:rgba(0, 0, 0, .3);
- 注意：背景半透明是值盒子背景半透明，盒子李明明的内容不会受到影响。
- CSS3新增属性，是IE9+版本浏览器才支持的！
- 但是现在实际开发中，我们不太关注兼容性写法了，可以放心使用。
8.CSS的背景总结
CSS背景总结.png
- 背景图片：实际开发中常见与logo或者一些装饰性的小图片或者超大的背景图，优点是非常便于控制位置。(精灵图也是一种运用场景)。
