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

时间 2019-12-11

标签 css 图中选取部分区域做为目标图标栏目 CSS 繁體版

原文原文链接

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

by:授客 QQ：1033553122html

1、图片素材ui

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

2、HTML代码spa

html代码以下：ssr

<!DOCTYPE html>3d

<html>htm

<head>blog

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

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

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

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