码迷,mamicode.com
首页 > Web开发 > 详细

html+css-->background-img(背景图的设置)

时间:2019-07-14 22:39:33      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:repeat-y   代码注释   center   文件   contain   family   height   边框   inf   

背景图:(相关验证代码请查看文件https://files.cnblogs.com/files/blogzzy/background-img.xml,在验证时需将当前不需要验证的代码注释掉)
    1.inherit:从父元素继承属性设置
    2.background-repeat:平铺(在图片大小小于元素尺寸时背景图默认平铺):
      no-repeat:取消默认平铺

技术图片

      repeat-x:横向平铺

技术图片

      repeat-y:纵向平铺

技术图片

    3.background-size:尺寸
      px、百分比:依旧默认平铺元素

技术图片

      cover:等比放大覆盖元素

技术图片

      contain:等比放大,直到图片的一边达到元素的边框

技术图片

    4.background-attachment:固定
      scroll:图片随滚动条滚动而上下移动

      fixed:图片固定在元素中不会随滚动条移动

----由于需要动态设置可以查看代码自己试验
    5.background-position:定位
      方式1:
      (+:取值为正 单位:px)
      x:水平偏移 + 右边 -左边
      y:垂直偏移 + 下  -上

技术图片----background-position:25px 50px;

      方式2:
      (以元素边框的左右为基准)
      x  left  right center
      y   top  bottom center

技术图片----background-position:left top;

技术图片----background-position:center;

 

(需要注意一点的是,除了设置背景图的固定以外,在设置背景图片的尺寸与定位时,若不取消图片的默认平铺,此时依然会对元素进行背景平铺)

 

html+css-->background-img(背景图的设置)

标签:repeat-y   代码注释   center   文件   contain   family   height   边框   inf   

原文地址:https://www.cnblogs.com/blogzzy/p/11185920.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!