1.背景颜色
background-color: 颜色值;
2.背景图片
常用于logo,装饰性图片,便于控制位置
background-image : url(地址);
/* 不要忘记url() */
background: url(666.jpg);
3.背景平铺
平铺:一个图片非常小,装它的盒子比它大,但要装满它,就采用背景平铺,将图片重复展示
/* 1.背景图片不平铺 */
background-repeat: no-repeat;
/* 2.默认的背景图片是平铺的 */
background-repeat: repeat;
/* 3.沿着x轴平铺 */
background-repeat: repeat-x;
/* 4.沿着y轴平铺 */
background-repeat: repeat-y;
background-color: pink;
/* 页面元素既可以添加背景元素也可以添加背景图片,只不过背景图片会压住背景颜色 */
4.背景图片位置
background-position:x y;
一.参数x,y均是方位名词
1./* background-position: 方位名词 */
background-position: center top;
如果是方位名词 center right和right center的效果是等价的 跟顺序没有关系
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
background-position: center center;//代表图片在正中间
二.参数是精确单位
第一个参数表示一定是x轴,第二个一定是y轴
只指定了一个值,那一定是x轴的值,y轴则默认是center
三.参数是混合单位
第一个参数表示一定是x轴,第二个一定是y轴
background-position: 20px center ;
/* 一定是x是20px,y轴是center */
background-position: center 20px;
/* 一定是x是center,y轴是20px */
5.背景固定(背景附着)
background-attachment : scorll//背景图像随着对象内容滚动
background-attachment : fixed//背景图像固定
6.背景复合写法
没有特定顺序,一般习惯为:
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
7.背景色半透明
background: rgba(0, 0, 0, ,5);
前3个是正常表示颜色的值,最后一个参数alpha表示透明度,取值范围在0-1之间
可以把0.3中的0省略
越接近0颜色越深,越接近1颜色越浅
注意:背景半透明是指盒子背景半透明,盒子里的内容不受影响(文字)