zoukankan      html  css  js  c++  java
  • background-position 50% 50%是如何计算的

    background-position:value1 value2

    value1和value2的值可以值绝对值也可以是百分数,大部分值都很好理解,但是50% 50%这两个值是如何计算的呢?

    图片水平和垂直居中。与 background-position:center center;效果等同。

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

     例如: .container{
            300px;
            height:150px;
            background:transparent url(bg.jpg) no-repeat scroll 50% 50%;
            border:5px solid green;
        }

    其x=(300-210)*50%=45px;

    y=(150-120)*50%=15px;

    效果如图:

    由于超出部分别往两端延伸,所以我们可以先制作一张宽度足够宽图片设置水平值为50%,这样可以用来适应不同的浏览器,使得图片水平充满浏览器窗口并且居中。替代margin:50 auto的功能。

  • 相关阅读:
    vim的一些基本配置
    做菜好吃的小技巧02
    SQLServer创建用户登录
    Python库整理
    centos7开机界面出现多个选项
    Elasticsearch和MongoDB简要对比
    OLTP与OLAP
    CentOS7命令总结
    windows下快速删除命令
    Idea配置热部署
  • 原文地址:https://www.cnblogs.com/diantao/p/5403688.html
Copyright © 2011-2022 走看看