css切背景图片（background-position）
给元素添加背景图片的方式有很多，个人总结的有：
用img插入图片；
css3的方式手动绘图；
单独用background-image单独插入图片；
其中用background-image有两种方法，一种是采用的单一照片来设置，另一种就是采用一张整图来切：
会用到的属性有：
background-positon:x轴起点 y轴起点；
background-size:背景图片的大小；
width：终点x轴位置；
height：终点y轴位置；
例如：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.img-total {
cursor: pointer;//定义鼠标移入样式
width: 30px;//x轴终点
height: 30px;//y轴终点
background-image: url(images/position.png);//图片位置
background-size: 120px 30px;//背景图片大小
display: inline-block;
} .img-home {
background-position: 0 0;//起点位置
background-color: #23ccfe;
} .img-favorite {
background-position: -31px 0;
background-color: #095f8a;
} .img-cart {
background-position: -61px 0;
background-color: #1b961b;
} .img-user {
background-position: -91px 0;
background-color: #94df94;
}
</style>
</head>
<body>
<div style="background-color: #f8f8f8; height:300px; padding-top:30px;">
<span class="img-total img-home"></span>
<span class="img-total img-favorite"></span>
<span class="img-total img-cart"></span>
<span class="img-total img-user"></span>
</div>
</body>
</html>
其中背景图片是用一张大图来切的：
显示效果：
可以通过：background-position还有width,height属性来控制起始位置来控制切点，要注意的是因为（0，0）点默认是左上角，而图片在原点的右下角（第四象限）所以position的坐标为负值；
css切背景图片（background-position）的更多相关文章
- css的背景图片background
1.使用背景图片的标签定设置宽高,没有设置的话,也需要用内容来撑开标签. 2.如果对同一个标签分开设置背景图片和颜色,背景颜色一定要写在背景图片后面,不然会被覆盖 <!DOCTYPE html& ...
- (转)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 ...
- CSS中背景图片定位方法
转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- CSS中背景图片的background-position中的left top到底是相对于谁的？
在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...
- CSS中对图片(background)的一些设置心得总结
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...
- CSS常用背景图片定位方法
CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...
- css 设置背景图片模糊，内容不模糊
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...
随机推荐
- Python 自然语言处理(1) 计数词汇
Python有一个自然语言处理的工具包,叫做NLTK(Natural Language ToolKit),可以帮助你实现自然语言挖掘,语言建模等等工作.但是没有NLTK,也一样可以实现简单的词类统计. ...
- Windows 8使用这半年（企业版）
2014-06-23 硬件:thinkpad e430c core i5-3210m 4g/500g 1.Windows 8出现开机引导问题 主要开机的时候提示缺少引导文件,按ctrl+alt+del ...
- 【JAVA集合框架之Set】
一.Set概述. Set集合的特点是元素不允许重复,而且是无序的(添加和取出的顺序不一致). Set接口中的方法和Collection接口中的方法几乎相同,略. Set接口下常用的两个类:HashSe ...
- OCJP(1Z0-851) 模拟题分析（二）over
Exam : 1Z0-851 Java Standard Edition 6 Programmer Certified Professional Exam 以下分析全都是我自己分析或者参考网上的,定有 ...
- 继续Get News List
拿到news list 所需要的技能 json数组反序列化 iOS中有哪些集合对象 数组的遍历 Debugging with GDB json数组反序列化 id jsonObject = [NSJSO ...
- 数据结构之图 Part2 - 2
邻接表 using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ...
- 6-01T-SQL中的运算符
算术运算符:+.-.*./.%. 赋值运算符:= 逻辑运算符:AND.OR.NOT. 比较运算符:>,<,<=,>=,<>.=,!=. 连接运算符:"+& ...
- 浅学JSON——Json.NET之首次试手
首次遭遇Json格式,缘由项目中用到Json数据,需要进行解析,为此,将Json数据转为了自己较为熟悉的DataTable格式,以此展示至DataGridView中,验证是否成功. 直接上代码: // ...
- YAML 技术研究
YAML预研文档 YAML概要 YAML是"YAML Ain't a Markup Language"(YAML不是一种置标语言)的递归缩写,早先YAML的意思其实是:" ...
- hdu 1251 字典树的应用
这道题看了大神的模板,直接用字典树提交的会爆内存,用stl 里的map有简单有快 #include <iostream> #include <map> #include < ...