html-背景

1.背景颜色 background-color

2.背景图片 background-image: url " "

3.背景平铺 background-repeat

  • repeat  默认平铺
  • no-repeat
  • repeat-x
  • repeat-y

4.背景的位置 background-position x y轴

  x 是默认left。 right center

  y是默认top。 bottom center

  值给关键字,关键字可以换位置 right top = top right

  数值的单位有 px %:

    只给一个值默认给x,y默认居中

5.背景大小 background-size

  值:% px
  给一个值的时候,默认X轴,Y轴默认auto;
  auto 会等比例缩放
  特殊值
  cover :放大为整个背景,宽高同时缩放,如果背景宽高不一样大,那么缩放可能超出范围
  contain :放大图片,当图片宽或者高等于背景宽或高就停止,图片不会超出范围

缩写:

     /*背景:      颜色      图片          不平铺     居中    图片缩放为背景一半大小*/

   background: yellow url("image地址") no-repeat center center/50% 50%;

    /*背景:      颜色      图片           不平铺     居中      覆盖背景(x,y)*/

   background: yellow url("image地址") no-repeat center center/cover;

    /*背景:      颜色         图片         不平铺     居中   覆盖背景直到x or y铺满*/

   background: yellow url("image地址") no-repeat center center/contain;

  ***必须设置背景大小

6.垂直对齐方式 vertical-align 

  top>>middle>>baseline>>bottom  默认跟baseline对齐

  定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
  top 元素的顶端与行中最高元素的顶端对齐 对齐到line-height的顶部
  middle 此元素放置在父元素的中部 对齐到line-height 中部
  bottom 元素的顶端与行中最低的元素的顶端对齐 对齐到line-height 底部
(与line-height相关)

  text-top 元素的顶端与父元素字体的顶端对齐
  text-bottom 元素的底端与父元素字体的底端对齐。
  baseline 默认。元素放置在父元素的基线上。

  加vertical-align的同排元素都要vertical-align;

原文地址:https://www.cnblogs.com/tangpg/p/8279693.html