哦,这个意思,那么如果你贴背景图的容器高度与背景图那几个logo一致,就采用纵向排列图片,垂直定位的方式;如果容器宽高都比logo尺寸大,那就没办法了,再嵌入一个小容器专门显示这个图标吧。
background-position属性分为x轴和y轴,也就是横坐标和纵坐标两个值:background-positionx和background-positiony。对于一整张大图只需要截取其中一部分,你需要知道两点:
1.需要的那一部分图片的在整个大图中的位置 2.它的大小
然后就好办了,我举个小例子:
一张300px*300px的大图,我需要的部分大小是宽20px高50px,在整个图片的位置离上边是20px;左边是80px,然后可以写样式了:
div{
background-image:url(bjimg.jpg)/*背景图片的路径*/
background-position:-80px -20px/*背景图片的位置是距左80px;距上20像素*/
width:20px/*div的宽度*/
height:50px/*div的高度*/
}
希望对你有所帮助。
js版和css版自动按比例调整图片大小方法,分别如下:
<title>javascript图片大小处理函数</title><script language=Javascript>
var proMaxHeight = 150
var proMaxWidth = 110
function proDownImage(ImgD){
var image=new Image()
image.src=ImgD.src
if(image.width>0 && image.height>0){
var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height
if(rate <= 1){
ImgD.width = image.width*rate
ImgD.height =image.height*rate
}
else {
ImgD.width = image.width
ImgD.height =image.height
}
}
}
</script>
</head>
<body>
<img src="999.jpg" border=0 width="150" height="110" onload=proDownImage(this) />
<img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this) />
</body>
纯css的防止图片撑破页面的代码,图片会自动按比例缩小:
<style type="text/css">.content-width {MARGIN: autoWIDTH: 600px}
.content-width img{MAX-WIDTH: 100%!importantHEIGHT: auto!importantwidth:expression(this.width > 600 ? "600px" : this.width)!important}
</style>
<div class="content-width">
<p><img src="/down/js/images/12567247980.jpg"/></p>
<p><img src="/down/js/images/12567247981.jpg"/></p>
</div>