Web开发:如何插入图片及设置其属性

您所在的位置:网站首页 在html中添加图片 Web开发:如何插入图片及设置其属性

Web开发:如何插入图片及设置其属性

2024-07-12 12:02| 来源: 网络整理| 查看: 265

html插入图片及设置其属性: 1. 插入图片1.1.效果1.2.方法 2.设置图片属性2.1.效果2.2.方法

1. 插入图片 1.1.效果

我们将这张图片插入空白网页中 Alt 效果如下: 在这里插入图片描述

1.2.方法

首先我们把图片放到和我们所写的.html文件同一的文件目录下: (注意图片以.jpg结尾)

Alt 接着如以下输入: 在这里插入图片描述

代码如下:

(alt 属性用来为图像定义一串预备的可替换的文本,当浏览器无法成功载入图像时,则替换文本告诉使用者其失去的信息。此时,浏览器将显示这个替代性的文本。)

2.设置图片属性 2.1.效果

我们将上图的图片改变其大小、位置: 在这里插入图片描述

2.2.方法

如下输出: 在这里插入图片描述 在这里插入图片描述 代码如下:

DOCTYPE html> weiki .textbox-with-image { position: relative; display: inline-block; } .textbox-with-image img { position: absolute; /*调整图片宽度*/ width: 15px; /*调整图片长度*/ height: 15px; /*图片定位*/ top: 55%; transform: translateY(-50%); left: 1px; }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3