首页 > 其他 > 详细

background 背景认知

时间:2018-09-12 20:47:03      阅读:296      评论:0      收藏:0      [点我收藏+]

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;
 */
}

 

background 背景认知

原文:https://www.cnblogs.com/zhoumao/p/9637179.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!