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

  • 相关阅读:
    响应式css样式
    组件 computed 与 vuex 中 getters 的使用,及 mapGetters 的使用,对象上追加属性,合并对象
    nginx 错误集锦
    动态的添加路由
    NProgress的使用 及 路由 token 定向的使用
    token的解码及 判断值不为空的方法
    nginx 的使用
    IT公司100题-tencent-打印所有高度为2的路径
    测试
    Objective-C 与 C++ 的异同
  • 原文地址:https://www.cnblogs.com/kuku/p/1671563.html
Copyright © 2011-2022 走看看