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属性实现大图里面抠取小图。

  • 相关阅读:
    Python3三位运算
    PyThon3函数的使用
    PyThon3类的基本使用
    PyThon3类的继承
    Python3方法重写
    【BZOJ3307】雨天的尾巴-线段树合并+树上差分
    【CF893F】Subtree Minimum Query-主席树
    【BZOJ2212】Tree Rotations(POI2011)-平衡树启发式合并
    【BZOJ2733】永无乡(HNOI2012)-平衡树启发式合并
    【BZOJ3160】万径人踪灭-FFT+Manacher
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5271331.html
Copyright © 2011-2022 走看看