使用 Image 元素

本主题介绍 VML，这是一项从 Windows Internet Explorer 9 开始弃用的功能。 依赖于 VML 的网页和应用程序应迁移到 SVG 或其他广泛支持的标准。

注意

截至 2011 年 12 月，本主题已存档。 因此，它不再主动维护。 有关详细信息，请参阅 存档内容。 有关 Windows Internet Explorer 当前版本的信息、建议和指南，请参阅 Internet Explorer 开发人员中心。

 

使用 <image>

在本主题中，我们将演示如何使用 <image> 元素显示具有各种特殊效果的图片。

如果要显示从外部源加载的图片，通常使用 <img> HTML 中提供的 元素，然后将 src 属性属性指向图像文件的位置。

或者，可以使用 <image> VML 中提供的 元素。 使用 <image> 元素时，只能创建一个图像文件，然后通过更改元素的属性属性以不同的方式显示图像 <image> 。 此外， <image> 元素提供了一些无法仅使用 <img> HTML 元素实现的特殊效果，例如 裁剪、 对比度、 亮度、 伽玛和 灰度。

返回顶部

裁剪

可以使用元素的 cropbottom、 croptop、 cropleft 和 cropright 属性 <image> 来显示从同一图像文件裁剪的不同图片。

这些裁剪属性的值表示从图片边缘剪切的百分比。 该值可以是介于 0 到 1 之间的任意数字。 默认情况下，该值设置为 0，表示边缘没有裁剪。 值 0.1 表示从边缘裁剪 10%，值 0.15 表示从边缘裁剪 15%，依依如此。

例如，若要显示全部从同一图像文件裁剪的五张图片，可以使用 <image> 元素并指定不同的裁剪值，如以下 VML 表示形式所示：

<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:85pt;height:64pt' src="image1.jpg"
cropbottom="0.2" cropright="0.15"/>
<v:image style='width:50pt;height:44pt' src="image1.jpg"
cropbottom="0.45" cropleft="0.5"/>
<v:image style='width:80pt;height:56pt' src="image1.jpg"
croptop="0.3" cropright="0.2"/>
<v:image style='width:70pt;height:48pt' src="image1.jpg"
croptop="0.4" cropleft="0.3"/>

第一个图像 <v:image style='width:100pt;height:80pt' src="image1.jpg" />没有任何裁剪值。 因此，原始图像的 100% 以 100 磅乘 80 磅的大小显示。

第二个图像 <v:image style='width:85pt;height:64pt' src="image1.jpg" cropbottom="0.2" cropright="0.15"/>具有一些裁剪值。 cropbottom="0.2" 指示将从底部裁剪 20% 的图片; cropright="0.15" 指示将从右边缘裁剪 15% 的图片。 然后，其余图片以 85 磅乘 64 磅的大小显示。

同样，第三个、第四个和第五个图像具有一些裁剪值。 原始图片根据裁剪值进行裁剪，然后根据宽度和高度的值显示。

返回顶部

contrast

可以使用 元素的 <image>gain 属性属性来显示具有不同对比度设置的各种图片。

增益属性属性的值可以是任意数字。 默认情况下，该值为 1，表示使用与原始图像相同的对比度。 值 0 表示无对比度。 数字越大，对比度就越高。

例如，若要显示具有不同对比度设置的五张图片，可以使用 <image> 元素并为 gain 属性设置不同的值，如以下 VML 表示形式所示：

<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gain=0 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gain=0.5 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gain=3 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gain=-0.4 />

当 增益 属性属性设置为 0 时，整个图像将变为灰色，因为没有对比度。 当 增益 属性属性设置为 3 时，对比度比设置为 0.5 时更明显。 当 增益 属性属性设置为负值（如 -0.4）时，对比度将反转。

返回顶部

brightness

可以使用 元素的 <image>blacklevel 属性属性来显示具有不同亮度设置的各种图片。

blacklevel 属性的值可以是介于 0 到 1 之间的任何值。 默认情况下，该值为 0，指示保留原始图像中的亮度级别。 值 1 表示最高亮度级别。

例如，若要显示具有不同亮度设置的五张图片，可以使用 <image> 元素并为 blacklevel 属性设置不同的值，如以下 VML 表示形式所示：

)

<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:100pt;height:80pt' src="image1.jpg" blacklevel=0.1 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" blacklevel=0.2 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" blacklevel=-0.05 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" blacklevel=-0.15 />

返回顶部

灰度

可以使用 元素的<image>灰度属性属性来显示带或不带灰度的图片。

灰度属性的值可以是 true 或 false。 默认情况下，该值设置为 false，以便图像将以颜色显示。 如果值设置为 true，则图像将以灰度显示。

例如，如下图所示，第一个图像使用灰度属性 <v:image style='width:100pt;height:80pt' src="image1.jpg" /> () 的默认设置 (false) 。 因此，图片以颜色显示。

第二个图像将灰度属性设置为 true (<v:image style='width:100pt;height:80pt' src="image1.jpg" grayscale=true /> ) 。 因此，图片以灰度显示，如以下 VML 表示形式所示：

<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:100pt;height:80pt' src="image1.jpg"
grayscale=true />

返回顶部

gamma

可以使用 元素的 <image>gamma 属性属性来显示具有不同伽玛设置的图片。

gamma 属性的值可以是介于 0 和 1 之间的任何值。 默认情况下，该值设置为 1。

例如，若要显示具有不同伽玛设置的三张图片，可以使用 <image> 元素并设置 gamma 属性属性的不同值，如以下 VML 表示形式所示：

<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gamma=0 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gamma=0.5 />

有关此元素的详细信息，请参阅 VML 规范 。