css图像属性

最新推荐文章于 2025-03-25 09:45:00 发布

vakakak

最新推荐文章于 2025-03-25 09:45:00 发布

阅读量3.2k

点赞数 30

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_76255666/article/details/140219483

1.插入图像

img是单个标记，图像样式由img标记将图像插入网页中，也可以使用CSS设置成某元素的背景图像，根据图像格式的不同，适用的地方也不同。图像样式由img标记的属性决定。img标记有两个必选的属性，分别是src、alt，其它属性为可选属性，img标记的具体属性、取值如下：

属性	取值	说明
alt	text	规定图像的代替文本
src	URL	规定图像的URL文本
name	text	规定图像的名称
height	pixels,%	定义图像的高度
width	pixels,%	定义图像的宽度
align	top\|middle\|bottom\|left\|center\|right	规定如何根据周围的文本来排列图像，分水平、垂直两个方向
border	pixels	定义图像的边框
hspace	pixels	定义图像左侧和右侧的空白
vspace	pixels	定义图像顶和底侧的空白
usemap	URL	将图像定义为客户端图像映射

1. 基本语法

<img src="URL" alt="代替文本">

2. alt属性

当图像加载不成功时显示规定文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插入图像及相关属性应用</title>
    <style type="text/css">
        body{
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>网页中插入图像</h3>
    <hr color="#3300ff">
    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.dfae341c76bd4e04efd7d986a4d66e88?rik=mgdtE7lIWErAdA&riu=https%3a%2f%2fptop.only.wip.la%3a443%2fhttp%2fimg.zcool.cn%2fcommunity%2f01bf2a57
    d21aaa0000018c1b0bb237.jpg%402o.jpg&ehk=lN6yYBONZsVGMsA7fQ1ZPnZzIYWaabzpc64Bg2JFya8%3d&risl=&pid=ImgRaw&r=0" alt="网络机房" title="网络机房">
</body>
</html>

3.设置图像的高度和宽度

1.基本语法

<img src="url" width="value" height="value">

2.语法说明

图像高度和宽度的单位可以时像素也可以是百分比
在设置图像的宽度高度时，可以只设置宽度和高度中的一个，另一个属性按原图的高度、宽度等比例显示。如果同时设置两个属性，图像会发生变形。

4.设置图像的边框

1.基本语法

<img src="URL" border="value">

2.语法说明

valu为边框线的宽度，用数字表示，单位为像素。

5.设置图像对齐方式

图像与文字之间的对齐方式通过img标记的align属性来设置。图像对其方式分水平对齐和垂直对齐方式两种，其中水平对齐方式有left、center、right，垂直方式的取值有top、middle、bottom，表示图像与同行文字的相对位置。

1.基本语法

<img src="URL" align="value">

2.语法说明

取值	说明
top	图像的顶端和当前文字顶端对齐，当前行的高度相应扩大
middle	图像的水平中线和当前行的文字中线对齐，当前行的高度相应扩大
bottom	图像的底端和当前行文字的底端对齐，当前行的高度相应扩大
left	图像左对齐，浮动游离于文字之外，文字环绕图像周围，文字行的高度没有任何变化
center	图像的水平中线和当前行的文字中线对齐，当前行的高度相应扩大
right	图像右对齐，浮动游离于文字之外，文字环绕图像周围，文字行的高度没有任何变化

6.设置图像间距

1.基本语法

<img src="url" hspace="水平间距数值" vspace="垂直间距数值">

2.语法说明

hspace调整图像左右两边的空白距离，vspace调整图像上下两边的空白距离。

7.设置图像热区链接

1.基本语法

<img src="图像地址" usemap="#映射图像名称">
    <map name="映射图像名称" id="映射图像名称">
        <area shape="热区形状1" coords="热区坐标1" href="url1" >
        ...
    </map>