如果html+css或图像可以达到我想要的装饰，我应该使用哪一个？

Question

例如，要创建流指示符，如下所示：

Step 1 > Step 2 > Step 3

我可以：

1.使用html+css

.concave{
  border-left:1em solid transparent;
  border-top:1em solid orange;
  border-bottom:1em solid orange;
}

.middle{
  background-color:orange;
}

.convex{
  border-left:1em solid orange;
  border-top:1em solid transparent;
  border-bottom:1em solid transparent;
}

<table cellspacing="0" cellpadding="0" border="0" style="font-size:30px;">
  <tr>
    <td class="concave"/>
    <td class="middle" style="width:25%;">Step 1</td>
    <td style="max-width:0.5em;"><div class="convex"/></td>
  </tr>
</table>

2.创建背景图像：

我的问题是，如果html+css或图像可以达到我想要的装饰，我应该使用哪一个？

Answer 1

这两种方法都是正确的，因为您首先需要使用语义HTML。因此，如果您有“步骤1”和“步骤2”，则确实有一个有序列表。从这个开始，并为屏幕媒体设置它的样式。使用背景图像，因为它们没有增加语义意义。

如果需要为打印媒体格式化它，请添加打印样式表。

Answer 2

无论哪一个对你的目标观众最有意义。因此，例如，如果用户需要能够打印页面并显示图像，请使用<img>。如果需要显示备选文本，也可以使用<img>。使用html+css也可能增加加载时间。有关更多信息，请参见这和这个也是。

Answer 3

这两种方法产生的结果并不相同。

例如：

您的css缩放成一个向量到一个点，但随后中断。您可以使用css媒体类型来更改其在不同显示上的外观，但并不是所有浏览器都支持它。

您的图像缩放为光栅，使用更多的带宽下载，但具有更好的兼容性。

在选择对任何给定问题的最佳解决方案之前，您需要有一些需求。但总的来说，我认为网站的优先次序是：

1. “所有”设备上的像素完美呈现
2. 超高速渲染和响应
3. 低成本。即。低带宽

图像一般做得很好，但如果你有太多的图片，它可能会掉到3上。

我认为对于你的小图像来说，带宽是微不足道的，它可能被放置在一个图像映射中，以进一步提高性能。