CSS从大图中抠图然后显示其中的一部分
相信大家在使用css时会遇到一个情况吧 就是一张大图片里面什么都有 各种图标都有 然而自己就是不太会使用其中的小图标 这是我最近的一次学习 首先上图
这么大一张图片 那么这么使其只显示一部分 并且为我所用勒 这是上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
}
#image{
width: 40px;
height: 40px;
background-image: url(img/su.jpg);
background-repeat: no-repeat;
background-position: -200px -240px;
/*申明 大图片是有了 40px一个 每个直接间距为40px 而且第一个表示距离x的距离 第二个表示距离y的距离*/
}
</style>
</head>
<body>
<diV id="image"> </diV>
</body>
</html>
核心的代码是
<style>
#image{
width: 40px;
height: 40px;
background-image: url(img/su.jpg);
background-repeat: no-repeat;
background-position: -200px -240px;
/*申明 大图片是有了 40px一个 每个直接间距为40px 而且第一个表示距离x的距离 第二个表示距离y的距离*/
}
</style>
<diV id="image"> </diV>
这里将div设置为id为image 而且这个文件的路径url(img/su.jpg)这些都必须设置好 这样就能够使用这个大图片了
显示效果是这样的
CSS从大图中抠图然后显示其中的一部分的更多相关文章
- CSS从大图中抠取小图完整教程(background-position应用)
CSS从大图中抠取小图完整教程(background-position应用) 转自: http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111 ...
- CSS从大图中抠取小图完整教程(background-position应用) (转)
自认为把background-position的应用讲得非常通俗易懂的教材.做个记号. 相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上. 起初小菜模仿网站的 ...
- CSS 从大图中选取部分区域作为目标图标
从大图中选取部分区域作为目标图标 by:授客 QQ:1033553122 1.图片素材 图片素材如下(大小:137px * 264px),图中从上到下,连续存放了两张100px * 100px的图 ...
- 如何设置GridView中某个字段显示数据的一部分？
后台方法: /// <summary> /// 截取字符串 /// </summary> /// <param name="str">要截取的字 ...
- CSS盒子模型中（）是透明的，这部分可以显示背景()
CSS盒子模型中()是透明的,这部分可以显示背景() border margin padding content 我的理解: · Margin(外边距) - 清除边框外的区域,外边距是透明 ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 用CSS让字体在一行内显示不换行（收藏）
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法 一般的文字截断(适用于内联与块): .text- ...
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...
- CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容
CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...
随机推荐
- 企查查app新增企业数据抓取
企查查每日新增企业数据抓取尚未完成的工作: 需要自行抓包获取设备id,appid,sign等等 sign和时间戳保持一致即可 把所有的数据库.redis配置 无法自动登录,账号需要独立 redis数据 ...
- poj - 1860 Currency Exchange Bellman-Ford 判断正环
Currency Exchange POJ - 1860 题意: 有许多货币兑换点,每个兑换点仅支持两种货币的兑换,兑换有相应的汇率和手续费.你有s这个货币 V 个,问是否能通过合理地兑换货币,使得你 ...
- 玲珑杯 1137 - Sin your life（数学）
题目链接:http://www.ifrog.cc/acm/problem/1137 题解:设m=n-z sin(x)+sin(y)=sin(m-y)+sin(y)利用公式得最大值为sqrt(sin(m ...
- 杭电第四场 hdu6336 Problem E. Matrix from Arrays 打表找规律 矩阵前缀和（模板）
Problem E. Matrix from Arrays Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/262144 ...
- SPOJ - QTREE（树链剖分+单点更新+区间最大值查询）
题意:给出n个点n-1条边的树,有两个操作,一个是查询节点l到r的边的最大值,然后指定边的更改权值. 题解:差不多是树链剖分的模版题,注意每个点表示的边是连向其父亲节点的边. #include < ...
- 基于 KubeSphere CI/CD 将 Spring Boot 项目发布至 Kubernetes
本示例基于开源的 KubeSphere 容器平台 演示如何通过 GitHub 仓库中的 Jenkinsfile 来创建流水线,流水线共包括 8 个阶段,最终将一个 Hello World 页面部署到 ...
- 微信公众号之获取openId
在小伙伴们开发微信公众号.小程序或者是在微信内置浏览器打开的项目时,会遇到的第一个问题就是如何获取openId,今天小编就给大家带来的是如何获取openId. 首先 我们要从微信开发者后台得到ap ...
- SpringDataJpa——JpaRepository查询功能（转）
1.JpaRepository支持接口规范方法名查询.意思是如果在接口中定义的查询方法符合它的命名规则,就可以不用写实现,目前支持的关键字如下. Keyword Sample JPQL snippet ...
- Protostuff序列化问题
最近在开发中遇到一个Protostuff序列化问题,在这记录一下问题的根源:分析一下Protostuff序列化和反序列化原理:以及怎么样避免改bug. 1. 问题描述 有一个push业务用到了mq,m ...
- 策略模式+注解 干掉业务代码中冗余的if else...
前言: 之前写过一个工作中常见升级模式-策略模式 的文章,里面讲了具体是怎样使用策略模式去抽象现实中的业务代码,今天来拿出实际代码来写个demo,这里做个整理来加深自己对策略模式的理解. 一.业务 ...