background:url(images/hh.gif) no-repeat -10px 0;},作用是移动背景的位置.

背影图片的左上角相对当前元素左上角的坐标。

右为X轴正半轴, 下为Y轴正半轴

当前元素左上角坐标为 0,0

默认图片的左上角正对当前元素的左上角

如果图片想向左移 10px;

复制代码

代码如下:

background:url(images/hh.gif) no-repeat -10px 0;}

如果图片想向上移 10px;

复制代码

代码如下:

background:url(images/hh.gif) no-repeat 0 -10px;}

同样

如果图片想向右移 10px;

复制代码

代码如下:

background:url(images/hh.gif) no-repeat 10px 0;}

做了个图片, 黑色框是要加背景的容器。

复制代码

代码如下:

css代码: background:url(images/hh.gif) no-repeat -10px -10px;}

CSS那个背景图片的坐标怎么设置?怎么计算的?的更多相关文章

  1. CSS中对图片(background)的一些设置心得总结

    写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...

  2. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

  3. CSS background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  4. CSS中背景图片的background-position中的left top到底是相对于谁的?

    在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...

  5. (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...

  6. HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...

  7. css的背景图片background

    1.使用背景图片的标签定设置宽高,没有设置的话,也需要用内容来撑开标签. 2.如果对同一个标签分开设置背景图片和颜色,背景颜色一定要写在背景图片后面,不然会被覆盖 <!DOCTYPE html& ...

  8. 【CSS】css网页背景图片设置

    刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...

  9. css样式背景图片设置缩放

    一.背景颜色图片平铺 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 默认是平铺 background-pos ...

随机推荐

  1. python tcp,udp简单使用

    import socket host = '127.0.0.1' port = 9999 #创建一个tcp socket套接字 tcp_server = socket.socket(socket.AF ...

  2. intent传值传对象跳转

    intent传值传对象跳转 1.传值 //原activity中存入一个字段 intent = new Intent(From.this, To.class); intent.putExtra(&quo ...

  3. HTTP学习笔记(一)报文和连接管理

    对TCP/IP协议簇有些了解的同学们应该都知道.TCP/IP协议通过精简ISO网络7层协议(事实上了解历史渊源的话,TCP/IP协议本来目的并非简化ISO的7层协议.仅仅是因为ISO协议簇制定速度慢于 ...

  4. oracle 使用job定时自动重置sequence

    一.赋予用户创建和删除sequence的权限 grant create any sequence to user_name; grant drop any sequnce to user_name; ...

  5. Ubuntu14.04 x86_64 install Xen

    Recommended reference: https://help.ubuntu.com/community/Xen Step One: Install Ubuntu14.04 on your c ...

  6. centos配置ip

    /etc/sysconfig/network-scripts/ifcfg-eth0文件做如下修改 DEVICE=eth0 HWADDR=08:00:27:46:1D:E1 TYPE=Ethernet ...

  7. 浏览器前缀-----[译]Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

    Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的.   所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可 ...

  8. com.opensymphony.xwork2.ognl.OgnlValueStack - Error setting expression 'customer.applyRate' with value '[Ljava.lang.String;@7d3fae2c'

    出错的3个最可能的原因:我是第二种错误 1.action配置错误 <action name="doCreateMeetingInfo" class="meeting ...

  9. 将web工程部署到tomcat

    http://blog.csdn.net/lucklq/article/details/7621807 http://jingyan.baidu.com/article/466506582f2f4af ...

  10. 03 redis之string类型命令解析

    Redis字符串类型的操作 set key value [ex 秒数] / [px 毫秒数] [nx] /[xx] 如: set a 1 ex 10 , 10秒有效 Set a 1 px 9000 , ...