首页 前端知识 css图像属性

css图像属性

2024-08-24 23:08:29 前端知识 前端哥 944 106 我要收藏

1.插入图像

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

属性取值说明
alttext规定图像的代替文本
srcURL规定图像的URL文本
nametext规定图像的名称
heightpixels,%定义图像的高度
widthpixels,%定义图像的宽度
aligntop|middle|bottom|left|center|right规定如何根据周围的文本来排列图像,分水平、垂直两个方向
borderpixels定义图像的边框
hspacepixels定义图像左侧和右侧的空白
vspacepixels定义图像顶和底侧的空白
usemapURL将图像定义为客户端图像映射

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=http://img.zcool.cn/community/01bf2a57
    d21aaa0000018c1b0bb237.jpg@2o.jpg&ehk=lN6yYBONZsVGMsA7fQ1ZPnZzIYWaabzpc64Bg2JFya8=&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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16766.html
标签
评论
发布的文章

jQuery File Upload 使用教程

2024-09-03 02:09:33

jQuery笔记

2024-05-03 18:05:51

jQuery-Spectragram 使用教程

2024-09-03 02:09:26

echarts问题汇总

2024-09-03 02:09:12

echarts自定义悬浮提示

2024-09-03 02:09:12

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!