background 背景认知

Posted 2021-01-05 zhoumao

background 背景 

　　背景颜色

/*背景颜色为红色*/
p {
   background-color:ren;     
 }

网页背景不仅可以设置颜色还可以插入图片

/*为背景插入图片*/
body {
        background:url("./1.jpg")
        /*括号中可以不加引号,但是加上还是好的 
　　　　　　备注  标签请求外面资源 有三种属性 href src url
 　　　　*/             
}

在背景中插入照片(可以在body  table...插入)时会出现平铺现象(当照片小于背景尺寸)

　　背景平铺 属性background-repeat

　　　　值:no-repeat(不平铺)

          

 

　　　　　 repeat(平铺)

 

　　　　　repert-x(横向平铺)

 

　　　　　repeat-y(纵向平铺)

 (以上四张图片来源w3school)

　　　　设置背景大小 background-size

p {
         background-size:200px 200px;
/*背景大小为200*200
 *
 *属性值可以为像素大小
 *    也可以设置为自适应auto
 *
 */
}    

　　　　调整背景位置 background-position

body {
        background-position:50% 50%;
/*
 *背景位置为居中
 *    背景位置也就是坐标轴
 *        注意:向下为正,向右为正;
 *也可设置像素
 *    eg:20px 20px;
 */
}