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=" ...
随机推荐
- Easy UI 面板
驾考园 http://www.jiakaoyuan.com 驾考园信息网 下载(源码)
- 攻城狮在路上（肆）How tomcat works（二） 一个简单的servlet容器
该节在上一节的基础上增加了所谓对静态资源和动态资源访问的不同控制流程.示例里面采用的是对路径“/servlet/”进行了特殊处理. 一. 主要还是从HttpServer1中的main方法开始,先解析出 ...
- js注入
1.JavaScript注入就是在浏览器地址栏中输入一段js代码,用来改变页面js变量.页面标签的内容. 使用Javascript注入,用户不需要关闭或保存网页就可以改变其内容,这是在浏览器的地址栏上 ...
- CI框架获取post和get参数 CodeIgniter
请参考:CI文档的输入类部分: $this->input->post() $this->input->get() ------------------------------- ...
- 避免在ASP.NET Core中使用服务定位器模式
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:服务定位器(Service Locator)作为一种反模式,一般情况下应该避免使用,在 ...
- 关于socket——SO_SNDBUF and SO_RECVBUF
转自:http://blog.csdn.net/wf1982/article/details/38871521 参见 http://stackoverflow.com/questions/425741 ...
- 如何更快的删除String中的空格[未完]
背景:此文章主要源于网址[1]所描述的,文中大部分方法亦是[1]中实现的. 下面介绍集中删除空格的方法: 方法1:按空格分割后再拼接 /// <summary> /// 按空格分割后拼 ...
- Iphone [Tab Bar实现多view切换,Picker,DataPicter实现
用Tab Bar Controller处理IPhone多个view切换, 而且还附有创建空项目,picker和DataPicker的实现! 具体步骤: 1.创建一个空项目,选择User Interfa ...
- 通过ajax访问Tomcat服务器web service接口时出现No 'Access-Control-Allow-Origin' header问题的解决办法
问题描述 通过ajax访问Web服务器(Tomcat7.0.42)中的json web service接口的时候,报以下跨域问题: XMLHttpRequest cannot load http:// ...
- loj 1032 数位dp
题目链接:http://lightoj.com/volume_showproblem.php?problem=1032 思路:数位dp, 采用记忆化搜索, dp[pos][pre][have] 表示 ...