图片定位 css
原文发布时间为:2009-07-14 —— 来源于本人的百度文章 [由搬家工具导入]
原图片:http://cache.soso.com/wenwen/i/w_icon.gif
从这图片定位几张图片出来:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片定位</title>
<style type="text/css">
.dingwei{
background:url(http://cache.soso.com/wenwen/i/w_icon.gif) no-repeat;
}
.childd{
background-position: 0px -350px;
width:16px;
height:16px;
}
.childd2{
background-position:0 -251px;
width:16px;
height:16px;
}
.childd3{
background-position:-88px -320px;
width:16px;
height:16px;
}
</style>
</head>
<body>
<div class="dingwei childd" id="hehe"></div>
<div class="dingwei childd2" id="hehe2"></div>
<div class="dingwei childd3" id="hehe3"></div>
</body>
</html>
===================================
-50 -50 是指图片沿着容器div,要想左移动50,向上移动50,想要获取的那个图片才能在div的左上角那个位置开始。
可以用工具FastStone Capture的 矩形框截图工具定位。http://1.fjdx1.crsky.com/200907/FSCapture_v6.5H.rar
图片定位 css的更多相关文章
- CSS常用背景图片定位方法
CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...
- CSS中背景图片定位方法
转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...
- CSS背景图片定位
原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
- CSS 背景图像 背景图片定位
背景图片定位 background-position属性可以给背景图片定位. background-position属性有两个值,第一个值是水平位置,第二个值是垂直位置.这两个值可以使用百分比来表示( ...
- (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...
- HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
- HTML+CSS—背景图片、图片定位
设置背景图片格式: background-image: url(img/ic.jpg); 注意点: 如果父容器面积大于背景图片,默认显示该图片整面平铺 设置是否需要平铺属性: background-r ...
- background的属性和背景图片定位的实例
本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...
- 背景图片与 CSS的那些事
在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:ba ...
随机推荐
- mysql零散操作
添加对外用户 CREATE USER 'admin'@'%' IDENTIFIED BY '!QAZ2wsx'; GRANT ALL PRIVILEGES ON *.* TO 'admin'@'%'; ...
- ES6箭头函数基本用法
ES6箭头函数基本用法 ``` window.onload = function(){ alert(abc); } //箭头函数 window.onload = ()=>{ alert(&quo ...
- Python 正则表达式 匹配任意字符
.(句点)匹配除了换行之外的所有一个字符, .*(点-星)匹配除了换行外的所有字符 >>> >>> r=re.compile(r'.*')>>> ...
- 关于 composer 的一些坑
发布自己的『包.库』至 https://packagist.org 却一直不能引入 网络上所有关于新建composer包的教程文章统统只提到了版本可能会影响无法 require 深深的坑哭了我们这些入 ...
- C语言实现判断分数等级
从屏幕上输入一个学生的成绩(0-100),对学生成绩进行评定: <=60为"E" 60~69为"D" 70~79为"C" 80~89为 ...
- Linux常见的系統进程
前言 在日常运维工作中,经常会看到一些奇怪的系统进程占用资源比较高.而且总是会听到业务线同学询问“xxx这个是啥进程啊?咋开启了这么多?” 而这些系统级的内核进程都是会用中括号括起来的,它们会执行一些 ...
- Python9-前端基础知识-day47
web开发本质: 1.浏览器输入网址回车都发生了什么? 1.浏览器给服务端发送一个消息 2.服务端拿到消息 3.服务端返回消息 4.浏览器展示页面C/S架构----B/S架构客户端和服务端 消息的格式 ...
- Windows下安装配置SQLite和使用的教程
什么是SQLite SQLite是一款非常轻量级的关系数据库系统,支持多数SQL92标准.SQLite在使用前不需要安装设置,不需要进程来启动.停止或配置,而其他大多数SQL数据库引擎是作为一个单独的 ...
- 对二维数组使用指针进行操作的探索(C语言)
/* Name: 对二维数组使用指针进行操作的探索 Copyright: Author: lingr7 Date: 01/12/18 11:55 Description: */ #include< ...
- 华东交通大学2018年ACM“双基”程序设计竞赛 K
MIKU酱是个玩游戏氪金的人,游戏公司给她制定了新的规则,如果想从关卡i到关卡j,你需要交一些钱就可以了,但同时,MIKU酱的爸爸zjw很爱她,所以她可以每过一关就向她爸要一次钱,但她爸每次给他的钱是 ...