前端入门（第六天）

背景属性

在设置背景属性之前要设置背景容器

也就是width和height

 

background-color:设置背景颜色

代码:

background-color:red;

background-color:rgb（0,0,255）;

background-color:#ff0000;

 

background-image:设置背景图片

代码:

background-image:url("*****");

（注:*号为图片的地址）

 

background-position:设置图片显示位置

代码:

background-position:值;

值:(默认是0% 0%)

left top 左上

left center 左中

left bottom 左下

center top 中上

center center 正中间

center bottom 中下

right top 右上

right center 右中

right bottom 右下

x% y% 第一个是水平位置，第二个是垂直位置，左上角是0% 0%，右下角是100% 100%，如果指定了一个值，其他默认50% 50%

background-repeat:设置背景如何填充

(补充:如果你设置了图片的width和height的话 ，如果都大于图片本身的长宽的话，图片就会重复填充，直到充满设置的长宽，如果都小于图片本身的长宽，图片就会按照设置长宽裁剪，同理可得另外两种情况)

background-repeat:值;

值:

repeat   默认值

repeat-x   只向水平方向平铺(如果都大于图片本身的长宽的话，只有水平方向重复)

repeat-y   只向垂直方向平铺(如果都大于图片本身的长宽的话，只有垂直方向重复)

no-repeat  不平铺(如果都大于图片本身的长宽的话，都不重复)

 

background-size:设置背景图像大小

background-size:值:

length  设置图片长宽

(代码:background-size:1200px 120px)

percentage 设置长宽的百分比

(代码:background-size:50% 50%)

cover  保证图片纵横比缩放成完全覆盖背景区域的最小大小

contain  保证图片纵横比缩放成合适背景定位区域的最大大小

(注:cover和contain都是保证图片的纵横比，但是cover充满整个容器，但是会切割图片的一部分而contain的话就是保证图片完整性的情况下使图片在容器内最大)