1、照片素材
照片素材以下（尺寸：137px * 264px），图中从上到下，持续储放了两张100px * 100px的图
2、HTML编码
html编码以下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<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⑻" />
<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 ⑴00px;
}
</style>
</head>
<body>
<p>照片上半一部分</p>
<div class="icon up"></div>
<p>照片下半一部分</p>
<div class="icon down"></div>
</body>
</html>
显示信息实际效果：
3、总结
加载情况照片，依据必须设定展现区宽度和高宽比，及情况照片的部位，让其总体目标照片內容“正好落在”展现区，在其中关键是运用了background-position的1些特点，图解以下
表明：
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 ⑴00px;。
情况照片从所属器皿左上角的地区向上挪动100px，超过的一部分掩藏。
background-position: 20 18x;。
情况照片从所属器皿左上角的地区向右移20px，向下移18px，超过的一部分掩藏。
background-position: ⑵0 ⑴8x;。
情况照片从所属器皿左上角的地区向左移⑵0px，向上移⑴8px，超过的一部分掩藏。
总结
以上所述是网编给大伙儿详细介绍的CSS 从大图选中取一部分地区做为总体目标标志的编码详解,期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！
Copyright © 2002-2020 在线网页制作_建网页_个人简介网页制作_简单网页_建立网页 版权所有 （网站地图） 粤ICP备10235580号