CSS 图片偏移

html-css022

CSS 图片偏移,第1张

首先你要知道要截取的图片在整张图片中的偏移量以及大小。然后:

<div style="width:wwwpxheight:hhhpxbackground:url(图片url) no-repeat -lllpx -tttpx"></div>

其中www是要截取的小图片的宽度,hhh则是高度;

lll是小图片的左边在大图片的偏移量,ttt则是上边的偏移量。

请注意负号不能省略!

<style type="text/css">

.left-img{float:leftposition:fixedtop:20pxleft:10px}

</style>

<img class="left-img" src="img.png" width="180" height="180" alt=""/>

注解:

<style type="text/css">....</style>/ 页内定义(CSS样式标签)

.left-img / 定义样式名称

{....} /定义样式

float:left //左浮动(float: right右浮动)

position:fixed//固定元素不随滚动条滚动 (position: absolute绝对定位,随滚动)

top:20px //距离页面顶部距离

left:10px//距离页面左侧距离

<img class="left-img" /指定给图像Img标签css样式.left-img

以上可以实现你需要的效果,但还是建议你系统化的学习下

百度关键词css 第一个站点w3school比较全面,前端架构师必读~