zoukankan      html  css  js  c++  java
  • CSS中background-position使用技巧

    一.background-position:left top;

      背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%;

    二.background-position:right bottom;

      背景图片的右下角和容器(container)的右下角对齐,超出的部分隐藏。等同于background- positon:100%,100%;也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器 (container)的高度-背景图片的高度

    三.background-position:500px 15px;。

      背景图片从容器(container)左上角的地方向右移500px,向下移15px,超出的部分隐藏。

    四.background-position:-500px -15px;。

      背景图片从容器(container)左上角的地方向左移500px,向上移15px,超出的部分隐藏。

    五.background-position:50% 50%;。

      等同于left:{容器(container)的宽度—背景图片的宽度}*left百分比,超出的部分隐藏。等同于right:{容器(container)的高度—背景图片的高度}*right百分比,超出的部分隐藏。

    六.background-position:-50% -50%;。

      等同于left:-{{容器(container)的宽度—背景图片的宽度}*left百分比(百分比都取正值)},超出的部分隐藏。等同于 right:-{{容器(container)的高度—背景图片的高度}*right百分比(百分比都取正值)},超出的部分隐藏。

     

    总结:利用div大小和十字架原理,可以用background-position属性实现大图里面抠取小图。

  • 相关阅读:
    【NOIP 2003】 加分二叉树
    【POJ 1655】 Balancing Act
    【HDU 3613】Best Reward
    【POJ 3461】 Oulipo
    【POJ 2752】 Seek the Name, Seek the Fame
    【POJ 1961】 Period
    【POJ 2406】 Power Strings
    BZOJ3028 食物(生成函数)
    BZOJ5372 PKUSC2018神仙的游戏(NTT)
    BZOJ4836 二元运算(分治FFT)
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5271331.html
Copyright © 2011-2022 走看看