譬如有张图片icon.png,里面有很多内容,便可以在CSS中这么用。
.sa {width:20pxheight:20pxoverflow:hiddenbackground:url(icon.png) no-repeat -20px -30px}
注解:
宽度和高度是控制显示范围的
overflow:hidden是确保不会有多余显示
background:url(icon.png)是使用图片作为背景显示,并且也只能作为背景显示才能达到这种做法的目的
no-repeat是不会重复,这个不是必须的,不过有会规范一些
-20px -30px是图片的定位,显示时会将图片按这个坐标来定位
上面只是针对固定大小的显示内容来定义的,如果大小不固定,在background属性中有可能需要更改设置。不过重点是这种方式是这么使用的。
如果大小不固定,也可以这样定义,让背景自适应:
.sa {width:autoheight:20pxoverflow:hiddenbackground:url(icon.png) no-repeat right bottom}
对于图片2(首页标签)的内容,也是这么使用的:
.a {width:100pxheight:25pxoverflow:hiddenbackground:url(2.png) no-repeat left center}
.a:hover {background-position:right center}
这样一来,当鼠标移到元素时,背景定位发生变化,显示的内容便由左边的变成右边的了。
不过你应该对CSS这方面还不是很了解,目前可能还没有很便捷的方式对这些CSS进行快速定义,所以也只能告诉你是这么一回事,但未必能帮得上你。
需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<script>标签,输入js代码:$('body').append('<img src="https://www.baidu.com/img/bd_logo1.png" />')。
3、浏览器运行index.html页面,此时图片被js成功显示到页面上。
var picID = 0//换成网页中那幅图在picURL中的序号(记得要从0开始数)var picURL = ["images/img1.jpg","images/img2.jpg","images/img3.jpg"]//将图片链接地址放进来,数量随意
function showimg(str){
if(str=="L"){
if(picID==0){
picID = picURL.length-1
document.getElementById("advimg").src = picURL[picID]
}else{
document.getElementById("advimg").src = picURL[--picID]
}
}else if(str=="R"){
if(picID==(picURL.length-1)){
picID = 0
document.getElementById("advimg").src = picURL[picID]
}else{
document.getElementById("advimg").src = picURL[++picID]
}
}
}