文章目录
- img 图片标签
- 1. 说明
- 2. 属性
- 3. 补充
- 1. png24 图片问题
- 2. 解决方法：
img 图片标签
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>图片标签</title></head><body><img src="2.gif" alt="这是一个大松鼠" width="100px" height="500px" /></body>
</html>
1. 说明
- 使用 img 标签来引入一个外部图片
- img 标签也是一个自结束标签
2. 属性
- src:设置一个外部图片的路径
- alt：可以用来设置在图片不能显示时，对图片的描述
1.搜索引擎可以通过 alt 属性来识别不同的图片
2.如果不写 alt 属性，则搜索引擎不会对 img 中的图片进行收录 - width:可以用来修改图片的宽度,一般使用 px 作为单位
- height:可以用来修改图片高度
1.宽度和高度如果只设置一个，另一个也会等比例调整大小
2.如果两个值同时指定则按照你指定的值来设置
3.一般开发中除了自适应的页面，不建议设置 width 和 height
<img src="1.gif" alt="这是一个大松鼠" width="100px" height="500px" />
3. 补充
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.box1 {width: 200px;height: 200px;background-image: url(img/3.png);background-repeat: no-repeat;}.box2 {width: 200px;height: 200px;background-image: url(img/4.png);background-repeat: no-repeat;}</style></head><body style="background-color: #bfa;"><div class="box1"></div><div class="box2"></div><img src="img/3.png" /><!-- 在body标签的最后引入外部的JS文件 --><!-- 以下代码只会在IE6中执行，其他浏览器中无效 --><!--[if IE 6]><scripttype="text/javascript"src="js/DD_belatedPNG_0.0.8a-min.js"></script><script type="text/javascript">Dd_belatedPNG.fix("*");</script><![endif]--></body>
</html>
1. png24 图片问题
- 在 IE6 中，对图片格式 png24 的支持度不高
- 如果使用的图片格式是 png24，则会导致透明效果无法正常显示
2. 解决方法：
- 可以使用 png8 来代替 png24，即可解决问题，
- 但是使用 png8 代替 png24 以后，图片的清晰度会有所下降
- 使用 JavaScript 来解决该问题，需要向页面中引入一个外部的 JavaScript 文件
- 然后再写一下简单的代码，来处理该问题
<!-- 以下代码只会在IE6中执行，其他浏览器中无效 -->
<!--[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script><script type="text/javascript">Dd_belatedPNG.fix("*");</script>
<![endif]-->
