zoukankan      html  css  js  c++  java
  • backgroundposition

    background-position 属性用来设置背景图片填充在元素的哪个位置,可以使用三种方式来设置 background-position 属性的值:

    1、数字:background-position:x y 

    x 和 y 是数字,此数字可以是正数也可以是负数,图片的左上角将与这个位置对齐, 如果只指定了一个值,这个值指示 x, y 值默认为 50%,使用如使用以下图片来设置元素的背景图片:

     

    这幅图片中有很多小按钮,每一个按钮的大小是 15 个像素,如果要把第三行第二个图片设置为某个元素的背景,可以使用以下 CSS:


    .btn {
    background-image
    :url(tools-sprites.png);
    background-repeat
    :no-repeat;
    background-position
    :-15px -30px;

    15px; height:15px; 

    }

     上面中使用了两个负数,这样第三行第二个图片就刚好显示在元素中了。越到下面的图片,这个负数值就越大。

    2、使用百分比:background-position:0% 0%

    百分比是相对于元素的宽度,如 background-position:50% 50%, 那么背景图片将显示在元素的中间,如 background-position:100% 50%, 背景图片将显示在右边,垂直的中间。

    3、使用关键字:background-position:vertical horizontal

    垂直关键字有:top、center、bottom, 水平关键字有:left、center、right,这里需要注意的就是,第一个值是垂直方向的值,第二个值是水平方向的值,这里跟使用数字和百分比的两个数据值是相反的。

  • 相关阅读:
    P1983 车站分级
    P1807 最长路
    P1347 排序
    P1073 最优贸易 (tarjan缩点+dp)
    最小费用最大流解决KM匹配问题
    CF191C Fools and Roads
    case when
    防呆机制
    DbCommand :执行超时已过期。完成操作之前已超时或服务器未响应。
    存储过程带参数和sqlcommand
  • 原文地址:https://www.cnblogs.com/kuku/p/1671563.html
Copyright © 2011-2022 走看看