背景图片相关

背景尺寸属性

  • CSS3中新增的一个属性, 专门用于设置背景图片大小
  • 格式:
  • background-size:宽度 高度;
  • 取值:
  • 具体像素
  • 百分比
  • 宽度等比拉伸(auto 100px)
  • 高度等比拉伸(100px auto)
  • cover(1.告诉系统图片需要等比拉伸2.告诉系统图片需要拉伸到宽度高度都填满元素)
  • contain(1.告诉系统图片需要等比拉伸2.告诉系统图片需要拉伸到宽度或者高度都填满元素)

背景图片定位区域属性

  • 告诉系统背景图片从什么区域开始显示
  • 格式:
  • background-origin
  • 取值:
  • padding-box(默认情况下就是从内边距区域开始显示)
  • border-box(从边框区域开始显示)
  • content-box(从内容区域开始显示)

背景绘制区域属性

  • 专门用于指定从哪个区域开始绘制背景的(背景颜色)
  • 格式:
  • background-clip
  • 取值:
  • padding-box(从内边距区域开始绘制背景)
  • border-box(默认情况下会从边框区域开始绘制背景)
  • content-box(从内容区域开始绘制背景)

多重背景图片

  • 多张背景图片之间用逗号隔开即可
  • 例如:
    background-image:url("images/animal1.png"),url("images/animal2.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right top;
  • 注意:
  • 先添加的背景图片会盖住后添加的背景图片
  • 建议在编写多重背景时拆开编写
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一. 背景尺寸属性 1.什么是背景尺寸属性背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小 ba...
    壹点微尘阅读 242评论 0 0
  • 第187课 背景尺寸属性 背景尺寸属性就是CSS3中新增的一个属性,专门用于设置背景图片大小 默认:图片按照自己...
    S大偉阅读 251评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,803评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,335评论 0 11
  • ## 背景 # 百度首页案例 # 背景图片 background-image # 背景平铺属性 backgroun...
    KsKison阅读 353评论 0 0