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 

  • 相关阅读:
    遇到的面试题目
    获取本机IP_考虑多网卡的情况
    C#发送电子邮件
    C#获取局域网中的所有正在使用的IP地址
    C#获取本机IP且过滤非真实网卡(如虚拟机网卡)
    C#获取本机的MAC地址
    C#获取本机磁盘信息
    C#获得系统打开的端口和状态
    C#通过编程方式实现Ping
    千万不要使用xfce和KDE版Manjaro Linux--之荒谬言论
  • 原文地址:https://www.cnblogs.com/xingzoudecd/p/8504912.html
Copyright © 2011-2022 走看看