首先你要知道要截取的图片在整张图片中的偏移量以及大小。然后:
<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比较全面,前端架构师必读~
二楼说的甚是我来帮你完整解决一下残留的问题吧
两种解决方法
先说原因吧,原因就是LOGO是通过背景图片导入的
#header {
background:url("../../templates/teakiagy/images/logo.jpg") no-repeat scroll 100px 50% transparent
height:100px
margin-bottom:0
overflow:hidden
}
#header {
background:none repeat scroll 0 0 #373A3C
border-bottom:0 solid #373A3C
margin-bottom:8px
min-width:980px
width:100%
而怪就怪在你有两份儿#header。宽度是执行的第二个width:100%,而不是980px,就不会随着下面的内容一起居中。
所以,解决方法就是
一,更改为width:980px
二,重新写hmtl中logo的代码,你可以写一个<span class="logo">logo</span>,CSS代码 .logo{display:block背景图片地址指向logo,宽度,高度大小与logo一致,}
显然第一种方法简单……
加油