HTML页面显示图片有哪些方式-群英

您现在的位置是：群英 > 开发技术 > web开发

HTML页面显示图片有哪些方式

Admin发表于 2022-04-28 17:44:235046 次浏览

上一篇： HTML5 input的新属性包括哪些，作用是什么

下一篇： HTML中去掉input的边框方法有几种

这篇文章给大家介绍了“HTML页面显示图片有哪些方式”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“HTML页面显示图片有哪些方式”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

html显示图片的方法：1、使用img标签，语法“<img src="图片文件地址" /> ”；2、给指定元素添加“background-image:url(图片文件地址);”样式。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

html显示图片的方法

方法1：使用img标签插入图片

在HTML中，可以使用img 元素向网页中嵌入一幅图像。

请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<img src="img/1.jpg" width="500" />
	</body>
</html>

方法2：使用css background-image属性

只需要给指定元素添加“background-image:url(图片文件地址);”样式即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				width: 500px;
				height: 300px;
				background-image: url(img/1.jpg);
				background-repeat: no-repeat;
				background-size: 400px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果图：

感谢各位的阅读，以上就是“HTML页面显示图片有哪些方式”的内容了，通过以上内容的阐述，相信大家对HTML页面显示图片有哪些方式已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注群英网络，群英网络将为大家推送更多相关知识点的文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： html显示图片

上一篇： HTML5 input的新属性包括哪些，作用是什么

下一篇： HTML中去掉input的边框方法有几种

相关信息推荐

web前端主要包括哪些技术

2022-09-05 17:28:03　

摘要：web前端技术有：1、HTML，是一种制作万维网页面的标准语言，它消除了不同计算机之间信息交流的障碍；2、CSS，可以帮助把网页外观做得更加美观；3、JavaScript，是一种轻量级的解释型编程语言；4、jQuery，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互；5、AJAX，创建交互式网页应用的网页开发技术。

如何用PHP写个动态表单生成工具，代码是什么

2022-09-21 09:30:53　

摘要：表单包含多种input类型，包括 hiiden类型 ,text类型，radio类型等。但手写表单累，耗时耗力，开发销量太低且代码量大了还容易写出bug，所以本文将用PHP编写动态表单生成工具，需要的可以参考一下

在pycharm中使用less的步骤是什么

2022-08-19 17:49:19　

摘要：这篇文章主要介绍了如何在pycharm中使用less,操作步骤真的很简单，本文通过图文并茂的形式给大家详细介绍，需要的朋友可以参考下