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

by:授客 QQ：1033553122

1、图片素材

图片素材如下（大小：137px * 264px），图中从上到下，连续存放了两张100px * 100px的图

 

2、HTML代码

html代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

.icon {

width:100px; /*--设置背景图显示区域宽度--*/

height:100px;/*--设置背景图显示区域高度--*/

border:1px solid red;

background-image:url(icons.png); /*--设置背景图像--*/

/*--no-repeat 不允许图像在任何方向上平铺,repeat-y,repeat-x分别允许图片在y，x方向上平铺--*/

background-repeat:no-repeat;

}

</style>

</head>

<body>

<div class="icon up"><p>图片上半部分</div>

<div class="icon down"><p>图片下半部分</p></div>

</body>

</html>

显示效果：

修改代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

.icon {

width:100px; /*--设置背景图显示区域宽度--*/

height:100px;/*--设置背景图显示区域高度--*/

border:1px solid red;

background-image:url(icons.png); /*--设置背景图像--*/

/*--no-repeat 不允许图像在任何方向上平铺,repeat-y,repeat-x分别允许图片在y，x方向上平铺--*/

background-repeat:no-repeat;

}

        .up {

           background-position: 0px 0px;

        }

 

        .down {

           background-position: 0px -100px;

        }

</style>

</head>

<body>

<p>图片上半部分</p>

<div class="icon up"></div>

<p>图片下半部分</p>

<div class="icon down"></div>

</body>

</html>

显示效果：

3、总结

载入背景图片，根据需要设置展示区宽度和高度，及背景图片的位置，让其目标图片内容“恰好落在”展示区，其中主要是利用了background-position的一些特性，图解如下

说明：

background-position：0 0

背景图片的左上角和所在容器左上角对齐，超出的部分隐藏。等同于 background-position: left top、background-position:0% 0%

background-position: 100% 100%

背景图片的右下角和所在容器的右下角对齐，超出的部分隐藏。等同于background- positon: right bottom、background-positon:容器(container)的宽度-背景图片的宽度,容器 (container)的高度-背景图片的高度

background-position: 0 -100px;。

背景图片从所在容器左上角的地方向上移动100px，超出的部分隐藏。

background-position: 20 18x;。

背景图片从所在容器左上角的地方向右移20px，向下移18px，超出的部分隐藏。

background-position: -20 -18x;。

背景图片从所在容器左上角的地方向左移-20px，向上移-18px，超出的部分隐藏。

参考链接：

http://www.w3school.com.cn/css/css_background.asp

http://www.w3school.com.cn/cssref/pr_background-position.asp

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从大图中抠图然后显示其中的一部分

    相信大家在使用css时会遇到一个情况吧 就是一张大图片里面什么都有 各种图标都有 然而自己就是不太会使用其中的小图标 这是我最近的一次学习 首先上图 这么大一张图片 那么这么使其只显示一部分 并且为我 ...

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

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

  5. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  6. 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...

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

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

  8. C#从大图中截取一部分图片

    #region 从大图中截取一部分图片 /// <summary> /// 从大图中截取一部分图片 /// </summary> /// <param name=&quo ...

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

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

随机推荐

  1. C# 控制台输入和输出

    目录 从控制台获取输入 将输出写入控制台 Console.Write() Console.WriteLine() 格式字符串 多重标记和值 格式化字符串 索引 对齐说明符 格式字段 标准数字格式说明符 ...

  2. 爬虫(十)：AJAX、爬取AJAX数据

    1. AJAX 1.1 什么是AJAX AJAX即“Asynchronous JavaScript And XML”(异步JavaScript和XML)可以使网页实现异步更新,就是不重新加载整个网页的 ...

  3. Java 商户管理系统 客户管理 库存管理 销售报表 SSM项目源码

    系统介绍: 1.系统采用主流的 SSM 框架 jsp JSTL bootstrap html5 (PC浏览器使用) 2.springmvc +spring4.3.7+ mybaits3.3  SSM ...

  4. Android高斯模糊实现方案

    1.使用Glide Glide.with(this) .load(service.getImageUri()) .dontAnimate() .error(R.drawable.error_img) ...

  5. WebAPI + log4net日志 存入数据库

    1.首先选择你的项目 打开net管理控制台 输入 install-package log4net 进行安装  也可以 在net包 搜索 log4net 2.安装完之后 在Models文件夹 创建一个L ...

  6. Codeforces Round #608 (Div. 2) 题解

    目录 Codeforces Round #608 (Div. 2) 题解 前言 A. Suits 题意 做法 程序 B. Blocks 题意 做法 程序 C. Shawarma Tent 题意 做法 ...

  7. 群晖NAS再再折腾

    问题 最近电信把我的公网地址收回去了,之前做好的网络端口映射失效了,在公司已经不能愉快地访问家里的网络.原先网络结构示意图如下: (直接访问方案网络结构图)   只需要对电信光猫(也是个路由器)和家用 ...

  8. 精通awk系列(10)：awk筛选行和处理字段的示例

    回到: Linux系列文章 Shell系列文章 Awk系列文章 awk数据筛选示例 筛选行 # 1.根据行号筛选 awk 'NR==2' a.txt # 筛选出第二行 awk 'NR>=2' a ...

  9. Unity容器<1>

    参考地址: https://docs.microsoft.com/en-us/previous-versions/msp-n-p/dn170416(v=pandp.10) 总览 Unity是一个轻量级 ...

  10. Django Forms ChoiceField 选项更新问题

    今天使用django的forms,发现单选后台新增数据后,前端表单选项不能刷新 class UserForm(forms.Form): name = forms.ChoiceField( choice ...