相信大家在使用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从大图中抠图然后显示其中的一部分的更多相关文章

  1. CSS从大图中抠取小图完整教程(background-position应用)

    CSS从大图中抠取小图完整教程(background-position应用)  转自: http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111 ...

  2. CSS从大图中抠取小图完整教程(background-position应用) (转)

    自认为把background-position的应用讲得非常通俗易懂的教材.做个记号. 相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上. 起初小菜模仿网站的 ...

  3. CSS 从大图中选取部分区域作为目标图标

    从大图中选取部分区域作为目标图标 by:授客 QQ:1033553122 1.图片素材 图片素材如下(大小:137px * 264px),图中从上到下,连续存放了两张100px * 100px的图   ...

  4. 如何设置GridView中某个字段显示数据的一部分？

    后台方法: /// <summary> /// 截取字符串 /// </summary> /// <param name="str">要截取的字 ...

  5. CSS盒子模型中（）是透明的，这部分可以显示背景()

    CSS盒子模型中()是透明的,这部分可以显示背景() border margin padding content 我的理解: ·       Margin(外边距) - 清除边框外的区域,外边距是透明 ...

  6. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  7. 用CSS让字体在一行内显示不换行（收藏）

    当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法   一般的文字截断(适用于内联与块): .text- ...

  8. CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...

  9. CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

随机推荐

  1. 深刻剖析spring三种注入方式以及使用注解的原理

    概述 注释配置相对于 XML 配置具有很多的优势: 它可以充分利用 Java 的反射机制获取类结构信息,这些信息可以有效减少配置的工作.如使用 JPA 注释配置 ORM 映射时,我们就不需要指定 PO ...

  2. Egret白鹭开发微信小游戏（使用皮肤搭建UI，代码调用组件功能）

    (1)新建皮肤,并命名如下 (2)根据实际情况自定义皮肤,例如: (3)修改名字为如下: (4)运行游戏会自动生成以下代码: (5)在default.thm.json中添加如下代码:(具体路径名字根据 ...

  3. C++string,char* 字符数组，int类型之间的转换

    string.int 常见类型之间相互转换 int & string 之间的转换 C++中更多的是使用流对象来实现类型转换 针对流对象 sstream实现 int,float 类型都可以实现 ...

  4. poj - 1860 Currency Exchange Bellman-Ford 判断正环

    Currency Exchange POJ - 1860 题意: 有许多货币兑换点,每个兑换点仅支持两种货币的兑换,兑换有相应的汇率和手续费.你有s这个货币 V 个,问是否能通过合理地兑换货币,使得你 ...

  5. Codeforces Round #480 (Div. 2) B. Marlin

    题目地址:http://codeforces.com/contest/980/problem/B 官方题解: 题意: 有一个城市有4行n列,n是奇数,有一个村庄在(1,1),村民在(4,n)钓鱼:还有 ...

  6. hdu 3265 Posters（线段树+扫描线+面积并）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3265 题意:给你一张挖了洞的墙纸贴在墙上,问你总面积有多少. 挖了洞后其实就是多了几个矩形墙纸,一张墙 ...

  7. codeforces 761 D. Dasha and Very Difficult Problem（二分+贪心）

    题目链接:http://codeforces.com/contest/761/problem/D 题意:给出一个长度为n的a序列和p序列,求任意一个b序列使得c[i]=b[i]-a[i],使得c序列的 ...

  8. Python默认参数

    在python函数中, 可以使用如下方式声明并初始化参数 def to_smash(total_candies, n_friends=3): """Return the ...

  9. PHP如何解决表单重复提交

    利用session   表单隐藏域中存放session(表单被请求时生成的标记).采用此方法在接收表单数据后,检查此标志值是否存在,先进行删除,然后处理数据; 若不存在,说明已提交过,忽略本次提交. ...

  10. Java EE—最轻量级的企业框架?

    确保高效发展进程的建议 很久以前,J2EE,特别是应用程序服务器被认为过于臃肿和"重量级".对于开发人员来说,使用此技术开发应用程序会非常繁琐且令人沮丧.但是,由于 J2EE 框架 ...