zoukankan      html  css  js  c++  java
  • background-position 详解

    一、语法

    语法:background-position:x, y;
    定义:背景图片相对容器原点的起始位置;
    取值:
        关键字:top | center | bottom | left | center | right
        百分比:百分数
        具体值:px、rem、em等确值
    默认值为:0% 0%(即坐标原点)
     

    二、定位原理

                                      (图一)
    容器:background作用的元素,即其视口,超出该容器的部分,将被隐藏。
    如(图一),以容器的起始点作为原点(0,0)绘制背景图片的起始位置坐标轴。
    background-position将定义背景图片起始于坐标轴的哪个位置,浏览器将其他部分隐藏,仅显示容器内的背景内容。
     
      例子:
                
                                (图二)                                                                             (图三)
    如(图二),设置background-position: -50px -50px,背景图的起始点位于(-50px, -50px);
    由此,显示的背景是被截断后的容器内的图片内容,如(图三)所示,其他象限遮罩部分图片不可见。
    总结:background-position为背景图的起始点,可相对整个坐标轴进行定位,且仅容器内的背景图内容可见。
     

    三、换算关系

    换算关系:关键字 -> 百分比 -> px(or rem em等)
     
    1、关键字 -> 百分比
                                     center -> 50% 
                                    left top -> 0%
                           right bottom -> 100%
     
    2、百分比 -> px
         (容器(container)的size — 背景图片的size) * 百分比
     
        如:background-position: a% b%;
        换算:
              x = (containerWidth - bgWidth) * a%
              y = (containerHeight - bgHeight) * b%
  • 相关阅读:
    WordPress网站绑定多个域名的方法
    htpasswd 命令使用
    在Windows下用OpenSSL生成证书步骤
    WCF中关于List和数据的转换问题
    NET2.0的配置文件
    C# Attribute
    c#自定义属性
    VS2005中读写配置文件(方法二)
    c#的反射
    Asp.NET 操作配置文件 Steven Pei 博客园
  • 原文地址:https://www.cnblogs.com/hity-tt/p/6306449.html
Copyright © 2011-2022 走看看