怎样在HTML中插入gif格式的图片?
2024-07-20 广告
HTML中插入gif格式的图片有几种简单的方法可以实现:
1、直接插入:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML中插入gif格式的图片</title>
</head>
<body>
<div><img src="name.gif" alt="" /></div>
</body>
</html>
2、采用css中background-image的属性实现此效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML中插入gif格式的图片</title>
</head>
<body>
<div style="background-image:url(name.gif); width:500px; height:375px; margin:0 auto;"></div>
</body>
</html>
3、采用css中background的属性:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML中插入gif格式的图片</title>
</head>
<body>
<div style="background:url(name.gif) center no-repeat; width:100%; height:375px; margin:0 auto;"></div>
</body>
</html>
小提示
确保图片的URL地址中包含图片文件的格式(如.jpg、.gif等等)。
在电脑上保留图片的备份文件,以防万一。
GIF图片很适合作为商标或动画出现,而JPEG图片适合作为复杂图像的格式,如产品摄影 等。
在大多数情况下,最好一直使用.gif、.jpeg、.jpg或.png等文件格式。其它格式可能无法在所有浏览器中都正确显示出来。
警告
不要将超链接引向他人的网站。这样做会占用他人网站的带宽,而且也无法为其带来访客。除此以外,带有超链接的图片会因链接网址的失效而消失。如果网站主机看到了你的超链接,他甚至可以更改你网站上显示的图片。
或者用css的background-image / background 属性
现在可以在css文件中<background-image src=" .gif"/>