自适应图片

一张图片胜过千言万语,而图片也是每个页面不可或缺的组成部分。但它们通常也占已下载字节的大部分。使用响应性网页设计时,不仅我们的布局能够根据设备特性而变化,图片也可以。

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

艺术指导

艺术指导示例

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

自适应图片

Udacity 课程屏幕截图

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

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

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

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

开始课程

标记中的图片

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

摘要

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

使用相对尺寸的图片

在指定图片的宽度时,请务必使用相对单位,以防止图片意外溢出视口。例如,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>

试试看

在上面的示例中,如果浏览器宽度至少为 800 像素,则使用 head.jpghead-2x.jpg,具体取决于设备分辨率。如果浏览器位于 450 像素到 800 像素之间,则再次使用 head-small.jpghead-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 2x
320 像素 2 400.jpg 2.5 倍
600 像素 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. Crews 网站,显示了可展开的产品图片
J. Crew 网站,包含可展开的产品图片。

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

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 在显示屏尺寸较大时开始显得模糊不清。

HTML5 徽标,PNG 格式
HTML5 徽标,SVG 格式

如果您想减少页面发出的文件请求数量,可以使用 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 有时可能很有用。如果您需要内嵌矢量图片,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 倍大小的图片,在带宽有限的网络上使用 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 &#9733;

您是超级 ★

将复杂图标替换为 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">.

试试看

谨慎使用图标字体

使用 FontAwesome 作为其字体图标的页面示例。
使用 FontAwesome 作为其字体图标的网页示例。

图标字体很受欢迎,使用也方便,但与 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 AwesomePictosGlyphicons

请务必平衡额外 HTTP 请求和文件大小与图标需求之间的平衡。例如,如果您只需要少量图标,最好使用图片或拼合图片。

优化图片以提升性能

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

摘要

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

选择合适的广告格式

可以考虑两种图片类型:矢量图片光栅图片。对于光栅图片,您还需要选择正确的压缩格式,例如:GIFPNGJPG

光栅图片(如照片和其他图片)表示为由各个点或像素组成的网格。光栅图像通常来自相机或扫描仪,也可以在浏览器中使用 canvas 元素创建。图片越大,文件大小也越大。放大到原始尺寸后,光栅图片会变得模糊,因为浏览器需要猜测如何填补缺失的像素。

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

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

在选择适当的格式时,请先参考以下准则:

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

缩减文件大小

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

有多种工具可用来对 JPGPNG 文件执行进一步的无损压缩,而不会影响图片质量。对于 JPG,请尝试使用 jpegtranjpegoptim(仅适用于 Linux;使用 --strip-all 选项运行)。对于 PNG,请尝试 OptiPNGPNGOUT

使用图片精灵

示例中使用的图片精灵表单

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 vehiculaIn 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>

请注意,使用这些技术确实需要呈现周期,这对移动设备来说非常重要。如果过度使用,您会失去您可能已经获得的好处,并且可能会降低页面性能。