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=" ...
随机推荐
- php提示 Notice: Use of undefined constant name - assumed
我们知道php在数组中写变量有二几种方法,我们出现这种提示就是你写成了[name]这种所以会有Notice: Use of undefined constant name - assumed name ...
- saltapi中expr_form参数的使用
以前,一直用compound参数, 现在,想要并行执行salt命令,那list就派上用场了. 同时传多个主机列表,用逗号分隔,然后,用list参数传,就好. [root@c1773 deployop] ...
- 攻城狮在路上（壹） Hibernate（十）--- 映射值类型集合
一.映射Set(集):未排序,无重复. 实例代码: <set name="images" table="IMAGES" lazy="true&q ...
- Oracle Segments可以跨多个data files吗？
首先,你需要明白的一点是:数据库的物理结构是由数据库的操作系统文件所决定,每一个Oracle数据库是由三种类型的文件组成:数据文件.日志文件和控制文件.数据库的文件为数据库信息提供真正的物理存储.每一 ...
- 人人网的账号登录及api操作
.renren.php <?php /** * PHP Library for renren.com * * @author */ class renrenPHP { function __co ...
- 发送http请求get方法
//获取网页html NSURL* url = [NSURL URLWithString:@"http://www.baidu.com"]; NSMutableURLRequest ...
- MongoDB3.0新特性
3月3日,MongoDB3.0终于发布了. 主要特点包括了对之前收购的WiredTiger存储引擎的支持,插件式存储引擎API,SCRAM-SHA-1认证机制,并改进了解释功能.此外,包含了自动化.备 ...
- 在网页中显示html代码
string str = "<div>aaa</div>"; this.Literal1.Text = string.Format("<pr ...
- Linux---从start_kernel到init进程启动
“平安的祝福 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ” ini ...
- Linux学习笔记（1）Linux虚拟机安装过程中的知识点及常用管理工具
1. VMware的相关知识 (1)建议的VMware的配置: CPU 主频1GHz以上 内存 1GB以上 硬盘 分区空闲空间8GB以上 (2)VMware创建快照 快照的作用是保存虚拟机的现有状态, ...