网页上截取显示图片的一部分

来源:转载

前端工程师在制作网页图标时,通常会将诸多精灵放在一张图片上,然后采用截取的方式在网页上显示出来,那么应该这样截取呢?下面分别使用div背景和img两种方式来演示。

 

显示效果

 


实现代码

<!DOCTYPE html><html><head><title></title><style type="text/css">* {padding: 0;margin: 0;font-weight: bold;}#pic {width: 150px;height: 150px;background: transparent url(./a.jpg) no-repeat scroll -100px -50px;/* left top*/}#pic2 {position: absolute;top: 368px;left: -100px;clip: rect(50px 250px 200px 100px);/* top right bottom left */}</style></head><body><div>原图<div><img src="./a.jpg"></div></div><div>使用div背景图片截取<div id="pic"></div></div><div>使用img截取<div><img id="pic2" src="./a.jpg"></div></div></body></html>

分享给朋友:
您可能感兴趣的文章:
随机阅读: