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

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

by:授客 QQ1033553122

1、图片素材

图片素材如下(大小:137px * 264px),图中从上到下,连续存放了两张100px * 100px的图

 

2HTML代码

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-position0 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

原文地址:https://www.cnblogs.com/shouke/p/11074780.html

时间: 2024-10-17 05:21:52

CSS 从大图中选取部分区域作为目标图标的相关文章

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

转:http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html 相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上. 起初小菜模仿网站的时候,经常遇到这个现象,那时候也不知道这时什么技术,人家的整张图片素材不会利用,只能用ps切图,切成单个的再用... 其实,这是一个非常简单的技术,就是因为想象的太难了,才一直找不到问题的关键. 要想实现CSS抠图,只需要用到一个属性:backgroun

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

相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上. 起初小菜模仿网站的时候,经常遇到这个现象,那时候也不知道这时什么技术,人家的整张图片素材不会利用,只能用ps切图,切成单个的再用... 其实,这是一个非常简单的技术,就是因为想象的太难了,才一直找不到问题的关键. 要想实现CSS抠图,只需要用到一个属性:background-position. 按照字面理解,这个属性就是背景定位,先看看google网站的素材图,如下: 假如小菜现在想做一个+1按钮,利用

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

自认为把background-position的应用讲得非常通俗易懂的教材.做个记号. 相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上. 起初小菜模仿网站的时候,经常遇到这个现象,那时候也不知道这时什么技术,人家的整张图片素材不会利用,只能用ps切图,切成单个的再用... 其实,这是一个非常简单的技术,就是因为想象的太难了,才一直找不到问题的关键. 要想实现CSS抠图,只需要用到一个属性:background-position. 按照字面理解,这个属性

OpenCV中感兴趣区域的选取与检测(一)

1.感兴趣区域的选取 感兴趣区域(Region of Interest, ROI)的选取,一般有两种情形:1)已知ROI在图像中的位置:2)ROI在图像中的位置未知. 1)第一种情形 很简单,根据ROI的坐标直接从原图抠出,不过前提是要知道其坐标,直接上例子吧. int getROI(Mat image, Rect rect) { Mat img=image.clone(); Mat roi; int cols=img.cols, rows=img.rows; //ROI越界,返回 if(col

谈谈CSS预处理技术中for循环的应用-CSS Sprite

各种新技术的出现,推动着Web前端技术飞速发展,在提升用户体验的同时也方便开发者: 在前端优化时,我们使用CSSSprite技术,把多个图片合在一张图片上,然后通过background-image,background-position来定位现实不同效果,这样来达到减少HTTP请求,毕竟HTTP请求是相当昂贵的,但是HTTP请求是少了,开发人员工作量就大了,要定位图片不是一件很方便的事情,非常麻烦,要一个一个地计算: 其实我们可以有点技巧,让图片排列有点规律,这样可以减少大量时间: 假如我们的图

CSS和SVG中的剪切——clip-path属性和&lt;clipPath&gt;元素

剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内的内容将会显示,而不在这个区域内的内容不会显示.这个区域被称之为“裁剪区域”.只要在这个区域之外的任何元素都不会显示.包括元素的内容.背景.边框.文本.轮廓等,甚至还包括他的子元素. 剪切的元素可以是任何容器和图片元素. 剪切路径的概念就相当于在元素上定义了一个视窗.它决定了元素哪些部分在这个“视窗

辛星跟您解析在CSS面包屑中三角形的定位问题

刚才看到有位网友很纳闷第二个棕色三角形是怎么定位的,我当感觉在下面说不清楚,就特别开了一片博客,来说清楚它.首先,前面的代码我们先抄下来,至于前面这部分代码是怎么来的,读我的用CSS制作面包屑导航的那篇博文,如果不明白,可以问我,我会解释的. 首先是html代码,我们直接拿过来,粘贴一下: <html> <head> <title>辛星手写CSS面包屑</title> <link rel="stylesheet" type=&quo

CSS+DIV布局中absolute和relative区别

http://developer.51cto.com/art/201009/225201.htm CSS+DIV布局中absolute和relative区别 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. 详解CSS+DIV布局定位 在用CSS+DIV进行布局定位的时候,一

C++从多n个数中选取m个数的组合

1 //start 是从哪个开始取, picked代表已经取了多少个数 2 //process和data是全局变量数组 3 //语言说明比较难,我举个例子吧 4 //从[ 1, 2, 3, 4 ]中选取 2 个数 5 //然后可以依次得到 6 // 1 2 7 // 1 3 8 // 1 4 9 // 2 3 10 // 2 4 11 // 3 4 12 void combination(int start, int picked) 13 { 14 if (picked == m) { 15 f