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. EXCEL最大行数问题:org.apache.xmlbeans.impl.store.Saver$TextSaver.resize(Saver.java:1700)

    今天在使用POI导出数据时,出现如下错误: ES查询阅读推荐比: resList: start: 写入excel Exception in thread "main" java.l ...

  2. ClassPathXmlApplicationContext和FileSystemXmlApplicationContext区别

    ClassPathXmlApplicationContext 默认文件路径是src下那一级classpath:和classpath*:的区别: classpath: 只能加载一个配置文件,如果配置了多 ...

  3. 我的Android进阶之旅------&gt;怎样在多个LinearLayout中加入分隔线

    假设要适合于全部的Android版本号,能够在多个LinearLayout放置用于显示分隔线的View. 比如,放一个ImageView组件.然后将其背景设为分隔线的颜色或图像,分隔线View的定义代 ...

  4. mock平台架构及实现

    转载: http://blog.csdn.net/xkhgnc_6666/article/details/51757209 在测试过程中有些情况通过手工测试是无法测试出来的或是非常难复现,比如网络异常 ...

  5. leetcode第一刷_Word Search

    这道题之前一直没敢做,没想到前天用递归一遍过了. . 当时为什么想着用递归,而不是dp呢.由于我想到达某个位置的情况有非常多,即使从当前位置開始的搜索是已知的,但之前的状态是如何的也无从得知啊,实话实 ...

  6. WPF 基础到企业应用系列5——WPF千年轮回 续前缘

    一.摘要 首先非常高兴这个系列能得到大家的关注和支持,前端时间身体状况不适,所以暂停了更新,对此表示非常抱歉,以后会逐渐加快进度.只是因为这是一个非常长的系列,我也想把它写好,所以以后也会慢慢来,在这 ...

  7. 四种常见的POST提交数据方式

    POST一般用来向服务端提交数据,有四种提交数据的格式,分别是: 1.application/x-www-form-urlencoded 2.application/json 3.multipart/ ...

  8. WINDOWS下的squid

    今天写这篇教程目的在于分享自己在WINDOWS主机下配置squid的方法.哪些地方写的不完善或是不完整或是需要修改的地方,大家可以提出.我会第一时间纠正.下面看正文部分.先提条件,您预安装配置squi ...

  9. HDU 2242 考研路茫茫——空调教室(边双连通)

    HDU 2242 考研路茫茫--空调教室 题目链接 思路:求边双连通分量.然后进行缩点,点权为双连通分支的点权之和,缩点完变成一棵树,然后在树上dfs一遍就能得出答案 代码: #include < ...

  10. vim与sublime

    vim与sublime 对程序员来说,写代码是再熟悉不过的事情了,windows系统自带有记事本软件,能写写小规模的代码,可是代码量大了,它的局限性就暴露得很明显了:没有语法高亮,没有自动提示,不支持 ...