zoukankan      html  css  js  c++  java
  • background-position背景定位

    • background-position属性设置背景图像的起始位置
    • xpos ypos第一个值是水平位置,第二个值是垂直,左上角是0,单位可以是长度值px,关键字和百分数值
    • 关键词字成对出现left right top bottom center,如果仅指定一个关键字,其他值将会是'center'
    • X% y%第一个值是水平位置,第二个是垂直,左上角是0% 0%,右下角是100% 100%,如果仅指定一个值,其他值将是50%,默认为:0% 0%
    • inherit指定background-position属性设置应该从父元素继承

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title></title>
     6 <style type="text/css">
     7 .logo{
     8 width: 400px;
     9 height: 400px;
    10 /* background-color: #f90;
    11 background:url(http://www.zhufengpeixun.cn/skin/20142/img/logo1.png);
    12 background-repeat: no-repeat; */
    13 background:#f90 url(http://www.zhufengpeixun.cn/skin/20142/img/logo1.png) no-repeat;
    14 background-position:right;
    15 }
    16 </style>
    17 </head>
    18 <body>
    19 <div class="logo"></div>
    20 </body>
    21 </html>
    • X轴的坐标(坐标方向)Y轴的坐标(垂直方向)X轴越大越往右Y轴越大越往小
    • 50% 50%=>center center 正中心的位置
    • background-position:背景定位,规定背景图片的起始坐标点(位置)
    • 单位:px %(百分比) 方位(top,bottom,left,right,center)
    • 方位只指明X轴,没有Y轴,默认Y轴为center
    • 百分比只写X轴50%,Y轴默认也是50%
    • background-position:left;=>left center
    • background-position:right;=>right center
  • 相关阅读:
    Ubuntu 16.04 快速搭建ftp服务(转载)
    emmc协议简介(转载)
    产品经理简介
    小程序常用代码
    微信登录
    sql临时表与变量表
    备份数据库与还原数据库
    JQuery多个异步操作后执行(resolve,promise,when,done)
    苹果IOS下text-shadow与box-shadow失效的解决办法
    jS弹出新窗口被拦截的解决方法
  • 原文地址:https://www.cnblogs.com/webaction/p/13903247.html
Copyright © 2011-2022 走看看