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. 228. 汇总区间(leetcode)

    #整体思路:使用堆栈,在Python中可以使用列表代替:如果a[i]-a[i-1]==1,就要将a[i]合并到之前的区间里,#所以我们队首位元素开辟一个区间为[a[0],a[0]]#做最后汇总时候,如 ...

  2. 【前端GUI】—— 网站美工必须掌握的PS知识点&思维导图

    前言:前端离不开与设计的沟通,有时候还需要自己上手改动甚至设计网页,所以这里简单梳理一下近期学习的“网站美工”相关知识及练习.(工作用不上的时候,自己玩儿着也蛮有意思的,哈哈(*゚∀゚*)~) 一.P ...

  3. 简单实现接口自动化测试(基于python+unittest)

    简单实现接口自动化测试(基于python+unittest) 简介 本文通过从Postman获取基本的接口测试Code简单的接口测试入手,一步步调整优化接口调用,以及增加基本的结果判断,讲解Pytho ...

  4. java web邮件收发

    1.网上方法要导入两个包 mail.jar&activation.jar package com.zjh.shopping.util; import java.util.Date; impor ...

  5. hibernate映射排序

    @OneToMany(mappedBy="member") @OrderBy(value = "TousuID desc")

  6. [BLE--Link Layer]物理信道

    简述 有线通信,是用电缆直接连接.然后分距离的长短.有些会须要载入波,信号也可能会经过不同的调制方式调制. 无线通信也是一样,仅仅是信号的传输是通过射频了,通过在某一频段.对无线信道进行调制,将数据发 ...

  7. oracle序列sequence

    序列 定义一个序列,自动产生连续的整数.也称序列生成器(sequence generator)产生序列号.在多用户环境下该序列生成器特别有用,可生成各返回序列号而不需要磁盘I/O或事务封锁.序列号为O ...

  8. Android 六大存储

    Android平台进行存储的方式: 一.使用SharedPreferences存储 二.文件存储数据 三.SQLite数据库存储 四.使用ContentProvider存储数据 五.网络存储数据 今天 ...

  9. 一个中断服务子程序ISR

    请看下面的程序(一个中断服务子程序ISR),请指出这段代码的错误.)[中国台湾某著名CPU生产公司2005年面试题] 答案:(1)ISR不能返回一个值.如果你不懂这个,那么是不会被雇用的.(2)ISR ...

  10. php部分--头像上传预览

    前台页面显示 <style type="text/css"> #yl{ width:200px; height:300px; background-image:url( ...