CSS基础之背景属性

背景颜色

语法：background-color:颜色值

常用的有颜色名、16进制颜色值、rgb颜色值、rgba颜色值。

如果没有设置背景颜色，则默认为透明。background-colo:transparent

背景图片

语法：background-image:url("图片路径")；

图片路径可以是相对路径也可以是绝对路径。

背景颜色和背景图片可以同时设置

背景重复

语法：background-repeat:repeat|no-repeat|repeat-x|repeat-y|

repeat是background-repeat的默认值，表示重复

no-repeat：表示不重复

repeat-x：沿X轴重复，也就是水平重复

repeat-y：表示沿Y轴重复，也就是垂直重复

背景尺寸

语法：background-size: 宽度 高度；

背景尺寸是给背景设置宽高。值为尺寸单位。

百分比是以父元素的百分比来设置宽度和高度

background-size:contain 保持原来的宽高比，是把背景图片扩展至最大尺寸，使宽度或高度完全适应内容区域。

background-size:cover 是把背景图片扩展至足够大，是背景图片完全覆盖背景区域。背景图片的某些部分无法显示在元素区域中。

当background-size只设置1个值时，第二个值是auto。图片不会变形，会保持原来的宽高比

背景定位

语法：background-position: right bottom;

background-position有两个值：水平位置 垂直位置；当只设置一个值时，另一个值就是center

背景定位可以通过方向定位：top、bottom、right、left、center;也可以使用具体的尺寸单位作为定位参考；也可以使用百分比作为定位参考

使用具体尺寸单位作为参考时，参考位置是背景图片左上角与元素左上角的水平垂直位置。只设置一个尺寸单位时，表示水平位置进行位移，另一个值也是center。

百分比定位：0% 0%图片在左上角 50% 50% 水平垂直居中 100% 100% 右下角

背景定位可以使用负值，方向与正值相反

背景固定

语法：background-attachment:scorll|fixed

此语法作用是设置背景图片是否随页面滚动

scorll：默认值，背景图片会随页面滚动而移动

fieed：固定，背景图片不会随页面滚动而移动

背景简写

语法：background:颜色| 图片路径 |背景重复| 背景定位/背景尺寸 （0 0 / 30px 90px; 200px 100px/30px 90px ）|背景固定

可以在一个属性中设置所有背景属性，用空格隔开；如果某个值不写，也不会出问题；使用背景简写，输入的代码最少，浏览器对背景简写支持度更高