教你如何HTML显示一张图片的一部分

最新推荐文章于 2024-07-11 14:38:04 发布

最新推荐文章于 2024-07-11 14:38:04 发布 · 4.6k 阅读

本文介绍了三种使用CSS实现背景图局部显示的方法：通过div及其样式属性、利用span元素及背景定位属性、直接使用img标签配合绝对定位和clip属性。这些方法能够帮助开发者灵活控制背景图的显示范围。

方法一：
<div style="position:absolute; top:0px;; left:0px; width:135px; height:56px; clip:rect(34px 135px 91px 1px);"><img src="webIndex_01s.gif" /></div>
上面代码中，div中的属性都很重要。（sy，ex，ey，sx）

方法二：
<style>
span {
display: block;//一定要有
background-image:url(webIndex_01s.gif);
background-repeat: no-repeat;
background-position: -336px -33px;//要显示的区域坐标，左上角为原点
width: 200px;//显示区域的宽和高
height: 25px;
}
</style>
<span></span>

方法三：
<img src="webIndex_01s.gif" style="position:absolute; top:120px; left:0px; clip:rect(34px 135px 91px 1px);" />
注意：图片的大小必须和大图的尺寸一样，而不是显示区域的尺寸