1、新建一个html文件,命名为test.html,在test.html文件内,使用img标签创建一张图片,图片是images文件夹下面的1.jpg。
2、为了展示隐藏图片后的效果,在img标签的外部使用div标签,同时设置div标签的class属性为mydiv。
3、在test.html文件内,编写<style type="text/css"></style>标签,页面的css样式将写在该标签内。
4、在css标签内,设置类名为mydiv的样式,使用border设置div的边框为1px的灰色边框,使用width设置div的宽度为300px,使用height设置div的高度为300px。
5、在css标签内,对img元素进行样式设置,将display属性设置为none,实现图片的隐藏。
6、在浏览器打开test.html文件,查看实现的效果。
假设没彩色的图片是1.png 有彩色的是2.png 然后这个是一个div的背景图 底下是div的文字 代码如下
$('div').mouseover(function(){$(this).css('background','url(2.png)').css('color','blue')
}).mouseout(function(){
$(this).css('background','url(1.png)').css('color','#000')
})
可以试试如下方法:<div style="background-image:url('背景图片')width:100%height:50px">
<img src="1.jpg" width="50" height="50" style="margin-left:100pxmargin-top:100px"><br>
<img src="1.jpg" width="50" height="50" style="margin-left:100pxmargin-top:50px">
</div>