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. MFC 文档视图关系

    参考:http://www.360doc.com/content/11/1102/09/3054335_160991088.shtml 写的很详细可以看看 IDC_:控件的ID命名前缀(Control ...

  2. 【温故知新】——BABYLON.js学习之路·前辈经验(二)

    前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知 ...

  3. 【前端GUI】——对一些优秀网页设计作品的分析&心得

    前言:优秀的网站设计作品都有一些相似的地方,即使是美学,也一定会遵循着一定的规律. ONE 这一组,属于同类. 主题:点心. 背景:卡通动物形象. 色调:柔和,甜美. 点线面布局: 在这两个页面中,点 ...

  4. linux中shell script的追踪与调试

    Shell调试篇 sh [-nvx] scripts.sh -n:不要执行script,仅查询语法的问题: -v:在执行script前,先将script的内容输出到屏幕上: -x:将使用到的scrip ...

  5. Oracle内存管理(之五)

    [深入解析--eygle]学习笔记 1.4. 2其它内存组件 Large Pool-大池是SGA的一个可选组件,通经常使用于共享server模式(MTS). 并行计算或 RMAN的备份恢复等操作. J ...

  6. 即将到来的Android N,将具备这些新特性

    原文转自:http://www.leiphone.com/news/201602/pSRQAuAjMFJITqHe.html         原创 訾竣喆 即将到来的Android N,将具备这些新特 ...

  7. 关于rtsp转码rtmp播放的两种方式,客户端直接转,远程服务器转

    需求 一.场景 用户多家门店有监控探头,设备是海康的和大华的.用户总部和门店不在一个网络下,并且总部要能实时调用查看门店监控,和门店回放画面.我们知道监控摄像机获取的视频是 rtsp 流的格式. 只能 ...

  8. 【小程序】微信小程序开发实践

    帐号相关流程 注册范围 企业 政府 媒体 其他组织 换句话讲就是不让个人开发者注册. :) 填写企业信息 不能使用和之前的公众号账户相同的邮箱,也就是说小程序是和微信公众号一个层级的. 填写公司机构信 ...

  9. tp框架where条件查询数据库

    tp框架where条件查询数据库 Where 条件表达式格式为: $map['字段名'] = array('表达式', '操作条件'); 其中 $map 是一个普通的数组变量,可以根据自己需求而命名. ...

  10. hdu-5015-233 Matrix-矩阵

    非常显然矩阵的第一列为: 0 a[1] a[2] a[3] a[4] 我们转化一下,转化为 23 a[1] a[2] a[3] a[4] 3 那么由第一列转移到第二列则为 23*10+3 a[1]+2 ...