自适应图片

一张图片胜过千言万语，图片也是每个页面不可或缺的一部分。但它们通常也占了下载字节的大部分。借助自适应设计，不仅我们的布局能根据设备特性而变化，图片也可以。

自适应设计意味着，不仅我们的布局能根据设备特性而变化，内容也可能会发生变化。例如，在高分辨率 (2x) 显示屏上，高分辨率图形可确保清晰度。一张宽度为 50% 的图片在浏览器宽度为 800 像素时可能没问题，但在窄款手机上占用的空间过多，并且在缩小以适应较小的屏幕时，需要相同的带宽开销。

艺术指导

而在其他时候，图片可能需要大幅修改：更改比例、剪裁图片，甚至替换整张图片。在这种情况下，更改图片通常称为艺术指导。如需查看更多示例，请参阅 responsiveimages.org/demos/。

自适应图片

您知道吗？平均而言，图片占加载网页所需字节的 60% 以上。

在本课程中，您将学习如何在现代 Web 上处理图片，使图片看起来很棒，并且可以在任何设备上快速加载。

在这个过程中，您将掌握各种技能和技巧，将自适应图片顺利集成到开发工作流中。学完本课程后，您将能够使用能够适应和响应不同视口大小和使用场景的图片进行开发。

这是一门通过 Udacity 提供的免费课程

开始课程

标记中的图片

img 元素功能强大，可以下载、解码和渲染内容，而现代浏览器支持多种图片格式。跨设备添加图片与在桌面设备上添加图片并无二致，只需进行一些细微的调整即可打造良好的体验。

摘要

• 为图片使用相对尺寸，以防止它们意外溢出容器。
• 如果您想根据设备特性（也称为艺术指导）指定不同的图片，请使用 picture 元素。
• 在 img 元素中使用 srcset 和 x 描述符，提示浏览器从不同密度中选择最适合的图片。
• 如果您的页面只有一两张图片，并且这些图片未在网站上的其他位置使用，请考虑使用内嵌图片来减少文件请求。

使用相对尺寸的图片

在指定图片的宽度时，请务必使用相对单位，以防止图片意外溢出视口。例如，width: 50%; 会使图片宽度为所包含元素的 50%（而非视口的 50% 或实际像素大小的 50%）。

由于 CSS 允许内容溢出容器，因此您可能需要使用 max-width: 100% 来防止图片和其他内容溢出。例如：

img, embed, object, video {
    max-width: 100%;
}

请务必通过 img 元素的 alt 属性提供有意义的说明；这些内容可通过为屏幕阅读器和其他辅助技术提供上下文，让您的网站更易于访问。

针对高 DPI 设备使用 srcset 增强 img

srcset 属性增强了 img 元素的行为，可让您轻松地针对不同设备特性提供多个图片文件。与 CSS 原生的 image-set CSS 函数类似，srcset 允许浏览器根据设备特性选择最佳图片，例如，在 2 倍显示屏上使用 2 倍图片，将来还可以在网络带宽受限时在 2 倍像素设备上使用 1 倍图片。

<img src="photo.png" srcset="photo@2x.png 2x" ...>

在不支持 srcset 的浏览器上，浏览器直接使用由 src 属性指定的默认图片文件。因此，无论设备能力如何，请务必始终包含可在任何设备上显示的 1x 图片。如果支持 srcset，系统会在发出任何请求之前解析图片/条件逗号分隔列表，仅下载和显示最合适的图片。

虽然条件可以包含从像素密度到宽度和高度等各种参数，但目前只有像素密度能够得到很好的支持。为了平衡当前行为与未来特征，请坚持只在属性中提供 2x 图片。

自适应图片中的艺术指导picture

如需根据设备特性更改图像（也称为艺术指导），请使用 picture 元素。picture 元素定义了一个声明性解决方案，用于根据设备尺寸、设备分辨率、屏幕方向等不同特征提供图片的多个版本。

如果图片来源具有多种密度，或者自适应设计要求在某些类型的屏幕上采用略有不同的图片，请使用 picture 元素。与 video 元素类似，该元素可以包含多个 source 元素，以便根据媒体查询或图片格式指定不同的图片文件。

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

试试看

在上面的示例中，如果浏览器宽度至少为 800px，则使用 head.jpg 或 head-2x.jpg，具体取决于设备分辨率。如果浏览器介于 450 像素到 800 像素之间，则根据设备分辨率再次使用 head-small.jpg 或 head-small- 2x.jpg。如果屏幕宽度小于 450px，并且实现了不支持 picture 元素的向后兼容性，浏览器会改为呈现 img 元素，因此应始终将其包含在内。

相对大小的图片

如果不知道图片的最终尺寸，则很难为图片来源指定密度描述符。对于宽度与浏览器宽度成比例的图像尤其如此，这些图像是可变的，具体取决于浏览器的大小。

您可以通过添加宽度描述符以及图片元素的大小来指定所提供每张图片的尺寸，而不是提供固定的图片大小和密度，从而使浏览器能够自动计算有效像素密度，并选择要下载的最佳图片。

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

试试看

上面的示例会渲染一张宽度为视口宽度的一半 (sizes="50vw") 的图片，并且根据浏览器的宽度及其设备像素比，无论浏览器窗口多大，它都能选择正确的图片。例如，下表显示了浏览器会选择哪张图片：

浏览器宽度	设备像素比	使用的图片	有效解决方法
400 像素	1	200.jpg	1 倍
400 像素	2	400.jpg	2 倍
320 像素	2	400.jpg	2.5 倍
600px	2	800.jpg	2.67 倍
640 像素	3	1000.jpg	3.125 倍
1100 像素	1	800.png	1.45 倍

考虑自适应图片中的断点

在许多情况下，图片大小可能会根据网站的布局断点发生变化。例如，在小屏幕上，您可能希望图片占据视口的整个宽度；而在较大的屏幕上，则应该只占一小部分。

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

试试看

上述示例中的 sizes 属性使用多个媒体查询来指定图片的尺寸。当浏览器宽度大于 600px 时，图片占据视口宽度的 25%；当它介于 500px 和 600px 之间时，图片为视口宽度的 50%；如果图片小于 500px，则为全宽。

使产品图片可扩展

客户希望能看一看他们要购买的商品。在零售网站上，用户希望能够查看产品的高分辨率特写，以便更好地了解细节，研究参与者如果不能查看，则会感到非常沮丧。

J. 工作人员网站。 叠加层消失表示图片可点按，提供放大后细节可见的放大图片。

其他图像技术

压缩图片

无论设备的实际功能如何，压缩图像技术都可以向所有设备提供高度压缩的 2x 图像。根据图片类型和压缩级别的不同，图片质量可能不会改变，但文件大小会显著减小。

试试看

JavaScript 图片替换

JavaScript 图片替换会检查设备的功能并“做正确的事”。您可以通过 window.devicePixelRatio 确定设备像素比，获取屏幕宽度和高度，甚至可以通过 navigator.connection 进行网络连接嗅探，或发出虚假请求。收集了所有这些信息后，您就可以确定要加载哪个图片。

这种方法的一大缺点是，使用 JavaScript 意味着您将延迟图片加载，至少要等到先行解析器完成。这意味着，图片要等到 pageload 事件触发后才会开始下载。此外，浏览器很可能会同时下载 1 倍大小和 2 倍大小的图片，从而导致页面重量增加。

内嵌图片：光栅图像和矢量图像

创建和存储图片有两种截然不同的方法，这将影响您以响应方式部署图片的方式。

光栅图像（如照片和其他图像）表示为由各个颜色点组成的网格。光栅图像可能来自相机或扫描仪，或者使用 HTML 画布元素创建。可使用 PNG、JPEG 和 WebP 等格式存储光栅图片。

矢量图片（例如徽标和艺术线条）定义为一组曲线、线条、形状、填充色和渐变色。矢量图像可通过 Adobe Illustrator 或 Inkscape 等程序创建，或使用 SVG 等矢量格式在代码中手写。

SVG

使用 SVG，可在网页中包含自适应矢量图形。矢量文件格式比光栅文件格式的优势在于，浏览器可以渲染任何大小的矢量图像。矢量格式描述了图片的几何图形，即图片是如何通过线条、曲线和颜色等构造的。另一方面，光栅格式仅包含关于各个颜色点的信息，因此在缩放时，浏览器必须猜测如何填充空白。

下面是同一张图片的两个版本：左侧是 PNG 图片，右侧是 SVG。SVG 在任何尺寸下看起来都很美观，而旁边的 PNG 在显示屏较大时看起来就会有些模糊。

如果您想减少页面发出的文件请求数量，您可以使用 SVG 或 Data URI 格式对图片进行内嵌编码。如果您查看此页面的源代码，会发现下面的两个徽标均以内嵌方式声明：Data URI 和 SVG。

SVG 在移动设备和桌面设备上获得了很好的支持，并且优化工具可以显著减小 SVG 大小。以下两个内嵌 SVG 徽标看起来完全相同，但一个大约 3KB，另一个仅为 2KB：

数据 URI

数据 URI 提供了一种以内嵌方式添加文件（如图片）的方法，只需使用以下格式将 img 元素的 src 设置为 Base64 编码的字符串即可：

<img src="data:image/svg+xml;base64,[data]">

上述 HTML5 徽标代码的开头如下所示：

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

（完整版本的长度超过 5000 个字符！）

拖放工具（如 jpillora.com/base64-encoder）可用于将二进制文件（如图片）转换为 Data URI。与 SVG 一样，移动设备和桌面设备浏览器能够很好地支持数据 URI。

在 CSS 中进行内嵌

Data URI 和 SVG 还可以内联到 CSS 中，移动设备和桌面设备均支持此功能。下面是两个外观完全相同的图片，在 CSS 中作为背景图片实现；一个是 Data URI，另一个是 SVG：

内嵌的优缺点

图片的内嵌代码可能很冗长，尤其是 Data URI 代码，那么您为什么要使用它呢？为了减少 HTTP 请求！SVG 和数据 URI 支持通过一个请求检索整个网页（包括图片、CSS 和 JavaScript）。

缺点：

• 与来自外部 src 的图片相比，在移动设备上，Data URI 在移动设备上的显示速度要慢得多。
• Data URI 可能会显著增加 HTML 请求的大小。
• 它们会增加标记和工作流的复杂性。
• Data URI 格式的文件远远大于二进制文件（多达 30%），因此不会减小总下载大小。
• Data URI 无法缓存，因此必须为使用它们的每个页面下载。
• IE 6 和 7 不支持此功能，IE8 不支持此功能。
• 使用 HTTP/2 时，减少资产请求数量会降低优先级。

由于所有元素都能自适应，因此，您需要测试哪一种效果最佳。使用开发者工具测量下载文件大小、请求数量和总延迟时间。对于光栅图像，Data URI 有时很有用，例如，如果主页只有一两张没有在其他地方使用的照片，则可以使用 Data URI。如果您需要内嵌矢量图像，SVG 是更好的选择。

CSS 中的图片

CSS background 属性是一款功能强大的工具，用于向元素添加复杂的图片，让您可以轻松添加多张图片，以及重复执行某些图片等。与媒体查询结合使用时，background 属性变得更加强大，能够根据屏幕分辨率、视口大小等有条件地加载图片。

摘要

• 使用最适合显示屏特性的图像，考虑屏幕尺寸、设备分辨率和页面布局。
• 结合使用媒体查询和 min-resolution 和 -webkit-min-device-pixel-ratio，针对高 DPI 显示屏更改 CSS 中的 background-image 属性。
• 除了标记中的 1x 图片之外，您还可以使用 srcset 提供高分辨率图片。
• 在使用 JavaScript 图像替换技术或向低分辨率设备提供高度压缩的高分辨率图像时，请考虑性能成本。

使用媒体查询有条件地加载图片或提供艺术指导

媒体查询不仅会影响页面布局，还可以用于有条件地加载图片，或者根据视口宽度提供艺术指导。

例如，在下面的示例中，在较小的屏幕上，只会下载 small.png 并将其应用于内容 div，而在较大的屏幕上，则会将 background-image: url(body.png) 应用于正文，而将 background-image: url(large.png) 应用于内容 div。

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

试试看

使用 image-set 提供高分辨率图片

CSS 中的 image-set() 函数增强了 background 属性的行为，使您可以轻松针对不同设备特性提供多个图片文件。这样，浏览器就可以根据设备特性来选择最佳图片，例如，在 2 倍分辨率的显示屏上使用 2 倍大小的图片，或者在带宽有限的网络上在 2 倍像素的设备上使用 1 倍图片。

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

除了加载正确的图片之外，浏览器也会相应地缩放图片。也就是说，浏览器会假设 2 倍大小的图片是 1 倍大小的图片的两倍，因此会将 2 倍大小的图片缩小 2 倍，这样这些图片在网页上看起来就一样大。

对 image-set() 的支持仍然是新的，只有 Chrome 和 Safari 带有 -webkit 供应商前缀才受支持。请注意，在 image-set() 不受支持时，添加后备图片，例如：

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

试试看

以上代码会在支持 image-set 的浏览器中加载合适的素材资源，否则会回退到 1x 素材资源。需要特别注意的是，虽然 image-set() 浏览器支持很低，但大多数浏览器会加载 1 倍素材资源。

使用媒体查询提供高分辨率图片或艺术指导

媒体查询可以根据设备像素比创建规则，从而针对 2 倍显示屏和 1 倍显示屏指定不同的图片。

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

Chrome、Firefox 和 Opera 均支持标准的 (min-resolution: 2dppx)，而 Safari 和 Android 浏览器则需要采用不带 dppx 单元的旧版供应商前缀语法。请记住，只有在设备与媒体查询匹配时才会加载这些样式，并且您必须为基本情况指定样式。这还有助于确保在浏览器不支持特定于分辨率的媒体查询时呈现某些内容。

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

试试看

您还可以使用 min-width 语法根据视口大小显示备用图片。此方法的好处是，如果媒体查询不匹配，则图片不会被下载。例如，只有在浏览器宽度为 500 像素或以上时，系统才会下载 bg.png 并将其应用于 body：

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

为图标使用 SVG

向页面添加图标时，请尽可能使用 SVG 图标，在某些情况下，请使用 Unicode 字符。

摘要

• 请为图标使用 SVG 或 Unicode，而不是光栅图片。

将简单图标替换为 Unicode

许多字体支持各种各样的 Unicode 字形，可用于代替图片。与图片不同，Unicode 字体可以缩放，无论在屏幕上的显示大小如何，显示效果都很好。

除了普通的字符集之外，Unicode 还可以包含箭头符号 (←)、数学运算符 (√)、几何形状 (★)、控制图片 (▶)、音符 (♬)、希腊字母 (?) 甚至国际象棋棋子 (♞)。

添加 Unicode 字符的方式与已命名实体相同：&#XXXX，其中 XXXX 表示 Unicode 字符编号。例如：

You're a super ★

您是超级 ★

将复杂图标替换为 SVG

对于更复杂的图标要求，SVG 图标通常比较轻量、易于使用，并且可以使用 CSS 设置样式。与光栅图片相比，SVG 具有许多优势：

• 它们属于矢量图形，可以无限缩放。
• 颜色、阴影、透明度和动画等 CSS 效果非常简单。
• SVG 图片可以直接内嵌在文档中。
• 它们是有语义的。
• 它们通过适当的属性提供更好的可访问性。

With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

试试看

谨慎使用图标字体

图标字体很受欢迎，使用起来也很方便，但与 SVG 图标相比，还是有一些缺点：

• 它们是可以无限缩放的矢量图形，但可能会进行抗锯齿处理，从而导致图标不如预期清晰。
• 有限的 CSS 样式设置。
• 像素完美定位可能很难，具体取决于行高、字母间距等。
• 它们没有语义，可能很难与屏幕阅读器或其他辅助技术结合使用。
• 除非正确设置了范围，否则在仅使用一小部分可用图标时，它们可能会导致文件过大。

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

试试看

市面上提供了数百种免费和付费的图标字体，包括 Font Awesome、Pictos 和 Glyphicons。

请务必在对图标的需求和文件大小之间取得平衡。例如，如果您只需要少量图标，则最好使用一个图片或一个图片精灵。

优化图片以提升性能

图片通常占据了下载字节的大部分，通常也占据了网页上大量的视觉空间。因此，优化图片通常可以最大限度地节省网站的流量并提高网站性能：浏览器需要下载的字节数越少，对客户端带宽的竞争就越少，浏览器下载和显示所有资源的速度就越快。

摘要

• 不要只是随机地选择图片格式，还要了解不同的可用格式，并使用最适合的格式。
• 在您的工作流中加入图片优化和压缩工具，以缩减文件大小。
• 通过将常用图片放入 image sprites 中，减少 http 请求数量。
• 为了缩短初始网页加载时间并减小初始页面重量，请考虑仅在图片滚动到视野范围内后才加载图片。

选择合适的广告格式

可以考虑以下两种类型的图片：矢量图片和光栅图片。对于光栅图片，您还需要选择正确的压缩格式，例如：GIF、PNG、JPG。

光栅图像（如照片和其他图像）表示为由单个点或像素组成的网格。光栅图像通常来自相机或扫描仪，也可以在浏览器中使用 canvas 元素创建。随着图片大小的增加，文件大小也相应地增加。当光栅图像放大到超过原始大小时，光栅图像会变得模糊不清，因为浏览器需要猜测如何填充缺失的像素。

矢量图片（例如徽标和艺术线条）由一组曲线、线条、形状和填充颜色定义。矢量图片是使用 Adobe Illustrator 或 Inkscape 等程序创建的，并保存为 SVG 等矢量格式。由于矢量图像是基于简单的基元构建的，因此可以进行缩放，而不会损失质量或文件大小。

在选择适当的格式时，请务必同时考虑图片的来源（光栅或矢量）和内容（颜色、动画、文本等）。没有一种格式适合所有图片类型，每种格式都有自己的优缺点。

在选择适当的格式时，请先参考以下指南：

• 对于摄影图片，请使用 JPG。
• 对矢量图片和纯色图形（例如徽标和艺术线条）使用 SVG。如果矢量艺术不可用，请尝试使用 WebP 或 PNG。
• 使用 PNG（而非 GIF），因为它可以提供更多颜色并提供更好的压缩比。
• 如需播放更长的动画，请考虑使用 <video>，它能提供更好的图片质量，并允许用户控制播放。

缩减文件大小

您可以在保存图片后对图片进行“后处理”，从而大幅缩减图片文件的大小。图像压缩工具有很多种：有损和无损压缩工具、在线压缩工具、GUI 压缩工具、命令行压缩工具。如果可能，最好尝试自动执行图片优化，以便将其内置于您的工作流中。

有多种工具可用于对 JPG 和 PNG 文件执行进一步的无损压缩，而不会影响图片质量。对于 JPG，请尝试 jpegtran 或 jpegoptim（仅适用于 Linux；使用 --strip-all 选项运行）。对于 PNG，请尝试使用 OptiPNG 或 PNGOUT。

使用图片精灵

CSS 精灵是一项技术，可将许多图片合并到一张“精灵表”图片中。然后，您只需指定元素的背景图片（精灵表）以及指定用于显示正确部分的偏移量，便可使用各个图片。

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

试试看

精灵化的优势在于，可以减少获取多张图片所需的下载次数，同时仍能够启用缓存。

考虑延迟加载

在非首屏包含多张图片的长页面上，延迟加载可根据需要加载图片，或在主要内容加载和呈现完毕后加载这些图片，从而显著加快加载速度。除了性能上的提升之外，使用延迟加载还可以打造无限滚动的体验。

在创建无限滚动的页面时，请务必小心，由于内容是在可见时加载的，因此搜索引擎可能永远看不到该内容。此外，用户想要在页脚中看到他们希望在页脚中看到的信息，不会看到页脚，因为新内容始终会加载。

完全避免使用图片

有时，最好的图像并不真是图像。请尽可能使用浏览器的原生功能实现相同或类似的效果。浏览器可以生成之前需要图片才能生成的视觉效果。这意味着浏览器不再需要下载单独的图片文件，从而防止图片缩放不当。您可以使用 Unicode 或特殊图标字体来渲染图标。

将文本放在标记内，而不要嵌入图片中

尽可能使用文字作为文本，而不要嵌入图片中。例如，如果将图片用作标题或者在图片中直接放置电话号码或地址等联系信息，会妨碍用户复制和粘贴信息；这会导致屏幕阅读器无法访问这些信息，而且应用无法做出响应。请改为将文本放在标记中，并在必要时使用网页字体以获得所需的样式。

使用 CSS 替换图片

现代浏览器可以使用 CSS 功能创建之前需要图片的样式。例如：可以使用 background 属性创建复杂的渐变，使用 box-shadow 创建阴影，并使用 border-radius 属性添加圆角。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

请注意，使用这些技术需要呈现周期，这一点在移动设备上非常显著。如果过度使用，您会失去您可能已经获得的任何好处，并且可能会降低性能。