如何用JS语句显示图片？

JavaScript013

如何用JS语句显示图片？,第1张

需要准备的材料分别有：电脑、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成功显示到页面上。

这个一般是用css来显示特定内容的。

譬如有张图片icon.png，里面有很多内容，便可以在css中这么用。

.sa

{width:20px

height:20px

overflow:hidden

background:url(icon.png)

no-repeat

-20px

-30px}

注解：

宽度和高度是控制显示范围的

overflow:hidden是确保不会有多余显示

background:url(icon.png)是使用图片作为背景显示，并且也只能作为背景显示才能达到这种做法的目的

no-repeat是不会重复，这个不是必须的，不过有会规范一些

-20px

-30px是图片的定位，显示时会将图片按这个坐标来定位

上面只是针对固定大小的显示内容来定义的，如果大小不固定，在background属性中有可能需要更改设置。不过重点是这种方式是这么使用的。

如果大小不固定，也可以这样定义，让背景自适应：

.sa

{width:auto

height:20px

overflow:hidden

background:url(icon.png)

no-repeat

right

bottom}

对于图片2(首页标签)的内容，也是这么使用的：

.a

{width:100px

height:25px

overflow:hidden

background:url(2.png)

no-repeat

left

center}

.a:hover

{background-position:right

center}

这样一来，当鼠标移到元素时，背景定位发生变化，显示的内容便由左边的变成右边的了。

不过你应该对css这方面还不是很了解，目前可能还没有很便捷的方式对这些css进行快速定义，所以也只能告诉你是这么一回事，但未必能帮得上你。