html点击图片出现旁白

html-css017

html点击图片出现旁白,第1张

html点击图片出现旁白可以给图片添加一个display：block。。根据相关公开信息显示，在日常的写html页面时，原生代码经常性的会引入图片，也经常性的会让图片宽度等于父盒子宽度的100%，高度自适应，此时会出现一个问题，图片下方总有撑开的一小部分，这里将父盒子背景颜色改成黑色，此时只需要给图片添加一个display：block。属性就会解决图片的这个问题。

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

div {width: 72pxheight: 72pxbackground: url(small3.png) no-repeatoverflow: hidden}

3、浏览器运行index.html页面，此时成功将矩形图片只显示了正方形部分。

4、点击小图后，成功显示了大图。