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,这里需要注意的就是,第一个值是垂直方向的值,第二个值是水平方向的值,这里跟使用数字和百分比的两个数据值是相反的。

  • 相关阅读:
    【HDU 1007】Quoit Design
    【BZOJ 4516】【SDOI 2016】生成魔咒
    【SPOJ 1812】Longest Common Substring II
    NOI2014 全国互测Round2
    1231: [Usaco2008 Nov]mixup2 混乱的奶牛
    3529: [Sdoi2014]数表
    2693: jzptab
    2565: 最长双回文串
    1562: [NOI2009]变换序列
    1965: [Ahoi2005]SHUFFLE 洗牌
  • 原文地址:https://www.cnblogs.com/kuku/p/1671563.html
Copyright © 2011-2022 走看看