zoukankan      html  css  js  c++  java
  • css背景图片定位练习(二): background-position的百分比

    background-position:x y;

    百分比定位并不能直观的看出来,需要通过计算。

    background-position百分比计算公式:

    (容器宽度—背景图片的宽度)*x%=xpx
    (容器高度—背景图片的高度)*y%=ypx

    上节我们使用的图片也可以继续拿来做练习:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景定位练习</title>
        
    </head>
    <body>
    <style rel="stylesheet" type="text/css">
    .box1, .box2, .box3, .box4,.box5, .box6, .box7, .box8,.box9 {
    float: left;
    width:100px;
    height: 100px;
    background: #666 url(18.png) no-repeat;
    margin-left: 10px;
    }
    
    
    /*
    (100px-400px)*x%=-300px; 那么x=100
    (100px-400px)*y%=0; 那么y=0
    */
    .box1{background-position:100% 0%}
    
    
    
    /*
    (100px-400px)*x%=-200px; 那么x=66.6666
    (100px-400px)*y%=0; 那么y=0
    */
    .box2{background-position:66.6666% 0%}
    
    
    /*
    (100px-400px)*x%=-100px; 那么x=33.3333
    (100px-400px)*y%=0; 那么y=0
    */
    .box3{background-position:33.3333% 0%}
    
    
    
    /*
    (100px-400px)*x%=0px; 那么x=0
    (100px-400px)*y%=0px; 那么y=0
    */
    .box4{background-position:0% 0%}
    
    
    
    /*
    (100px-400px)*x%=0px; 那么x=0
    (100px-400px)*y%=-100px; 那么y=33.3333
    */
    .box5{background-position:0% 33.3333%}
    
    
    /*
    (100px-400px)*x%=0px; 那么x=0
    (100px-400px)*y%=-200px; 那么y=66.66
    */
    .box6{background-position:0% 66.6666%}
    
    
    /*
    (100px-400px)*x%=0px; 那么x=0
    (100px-400px)*y%=-300px; 那么y=100
    */
    .box7{background-position:0% 100%}
    
    
    /*
    (100px-400px)*x%=-300px; 那么x=100
    (100px-400px)*y%=-200px; 那么y=100
    */
    .box8{background-position:100% 66.6666%}
    
    
    
    /*
    (100px-400px)*x%=-300px; 那么x=100
    (100px-400px)*y%=-300px; 那么y=100
    */
    .box9{background-position:100% 100%}
    
        </style>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
        <div class="box9"></div>
    
    </body>
    </html>

    预览效果:

    因此不难得出background-position的等价写法:

    left top,top left ,0 0等价于 0% 0%

    center center 等价于 50% 50%

    bottom right,right bottom 等价于 100% 100%

    center right,right center 等价于 100% 50%

    bottom center, center bottom 等价于 50% 100%

    left center,center left 等价于 0% 50%

    bottom left,left bottom 等价于 0% 100%

    ......

  • 相关阅读:
    再来五道剑指offer题目
    高强度学习训练第十天总结:Class文件
    windows linux 子系统及windows terminal的使用。
    从植物大战僵尸开始一步一步带你入门逆向工程,
    高强度学习训练第九天总结:5道剑指offer的题目
    高强度学习训练第八天总结:MySQL的一些优化
    JVM的一些工具的简要使用
    手把手教你使用Java实现一个神经网络
    指定路径创建文件,并写入数据
    c#创建windows服务(代码方式安装、启动、停止、卸载服务)
  • 原文地址:https://www.cnblogs.com/tinyphp/p/5390228.html
Copyright © 2011-2022 走看看