• 技术文章 >web前端 >html教程

    html如何显示图片

    青灯夜游青灯夜游2021-10-11 15:52:17原创259

    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>

    1.png

    方法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>

    效果图:

    2.png

    推荐教程:《html视频教程

    以上就是html如何显示图片的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html 显示图片
    上一篇:html怎么设置表格标题 下一篇:没有了
    线上培训班

    相关文章推荐

    • html文本框长度怎么设置• html怎么设置元素不可见• html图片的透明度怎么设置• html怎么设置表格标题

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网