zoukankan      html  css  js  c++  java
  • background-position使用需要注意的地方

    background-position有三种表现形式

    (1) top left (默认情况)     

    top center
    top right
    center left

    center center

    center right

    bottom left
    bottom center

    bottom right

    是这样理解的,图片分三层。top,center,bottom。
    top后面又left,center,right分别表示top层的最左边,最中间和最右边
    center后面又有left,center,right,分别表示center的最左边,最中间和最右边。
    bottom后面又有left,center,right,分别表示bottom层的最左边,最中间和最右边。

    (2) 用百分比进行表示

    x% y% x表示水平距离,y%表示垂直距离

    (3) px表示
    ‘x’px ‘y’px:  x表示水平距离,y表示垂直距离
    -------------------------------------------------------------------------------------
    使用backgroun-position要注意情况

    例如图片的原始大小为300px * 400px。

    (1)如果容器div给的宽度400px,高度也比img的高度大。

    图片会在按照div宽度正常进行background-position
    如果容器给的高度比img的高度小,则图片就会自自动截取到容器给的高度处。

    (2)如果容器div给的宽度200px,不管高度如何变化,图片会自动截取到容器给的高度处。

       如果background-positiontop center
    那么显示的图片就会显示“正常图片top center”       

    (3) background: a b c;

    a表示:background-image

    b表示background-repeat

    c表示background-position 

  • 相关阅读:
    opensuse使用zypper安装软件
    补习系列(1)-springboot项目基础搭建课
    补习系列-springboot-使用assembly进行项目打包
    log4j2 使用纪要
    mongos-sharding连接池配置
    maven-代码风格检查工具
    mtools-你可能没用过的mongodb神器
    mongodb分布式集群搭建手记
    mongodb分片扩展架构
    mongodb副本集高可用架构
  • 原文地址:https://www.cnblogs.com/xingzoudecd/p/8504912.html
Copyright © 2011-2022 走看看