background-属性

编辑本博客

背景颜色background-color

• 英文名称
• rgb表示法，红绿蓝值从0~255取值，rgb(0,0,0)黑色，rgb(255,255,255)白色
• 十六进制表示法

网站颜色代码

背景图片background-img

background-image: url("./img/banabana.jpg");

• url设置资源链接

设置图片平铺显示方式，padding区域也将平铺

background-repeat: repeat;

• repeat：默认属性，平铺显示
• no-repeat：不平铺显示，显示一张
• repeat-x：水平方向平铺
• repeat-y：垂直方向平铺

background-postion

调整图片位置属性

background-position: 0 0;

第一个表示水平移动距离，第二个数字表示垂直方向移动的距离。

可以设置负数，表示向左和向上移动指定距离

css雪碧图： 通过设置postion属性来显示指定内容

postion除了设置数字外，还有以下值可设置

水平方向：left，right，center

垂直方向：top center bottom

body{
    /*属性方法设置*/
    /*background-image: url(./img/banner.jpg);*/
    /*background-repeat: no-repeat;*/
    /*!*水平居中通天banner图*!*/
    /*background-position: center top;*/
    
    /*综合属性写法*/
    background:red url(./img/banner.jpg) no-repeat center top;
}

background-attachent属性

• fixed：固定位置，浏览器滚动时图片位置不动