zoukankan      html  css  js  c++  java
  • 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;

  • 相关阅读:
    菜鸟快速自学java00之变量类型
    php 接口和抽象类
    java 三大特性之多态性
    设计模式
    依赖注入
    Java设计模式工厂模式
    php 设计模式之策略模式
    大数的概述
    熟悉常用的Linux操作
    GridView动态添加列
  • 原文地址:https://www.cnblogs.com/tangpg/p/8279693.html
Copyright © 2011-2022 走看看