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的功能。

  • 相关阅读:
    WebStorm2020.3.0及以下安装激活方法
    CSS随堂笔记【狂神说JAVA】
    HTML随堂笔记【狂神说JAVA】
    JAVA语言基础随堂笔记
    js 常用类和方法
    js 数组
    js 对象和函数
    js 基础语法
    JavaScript 简介
    PS基础
  • 原文地址:https://www.cnblogs.com/diantao/p/5403688.html
Copyright © 2011-2022 走看看