如果可以严格使用 CSS 重新创建图像，那么该图像还有用吗？

Question

我以前在我的网站上有一些图片，它们是带有边框和背景颜色的简单药丸形式。它们充当 login/register、添加到购物车等 "buttons"，当点击时给出一个动作。

考虑到这些图像的简单性，可以很容易地在 CSS 中重新制作它们 1:1。虽然下面的代码片段并不完全 1:1，但它足够接近以可视化纯粹的 CSS 选项的相似程度。第二个药丸是 CSS 正在重新创建的图像。

.butt {
  border: 2px solid black;
  font-family: Raleway;
  font-size: 18pt;
  font-weight: 500;
  color: white;
  margin-left: auto;
  margin-right: auto;
  border-radius: 7px;
  display: -webkit-flex;
  display: inline-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  box-sizing: border-box;
  height: 50px;
  width: 150px;
  background-color: #cc5a5a;
  cursor: default;
}

<div class="butt">No Stock</div> <br/> <br/>
<img src="http://i.stack.imgur.com/hhjht.png" alt=""/>

我看到的很多网站仍然使用 sprite 进行基本导航，例如 left/right 的人字形或箭头，简单的文本作为链接图像到页面等等。我想知道为什么这些没有在 CSS?

中完成

在我看来，使用 CSS 意味着它加载速度更快且可扩展。网站使用图像代替可以用 CSS 完成的事情有什么好处？

Answer 1

一个好处是支持旧版本的浏览器。大多数站点仍然希望支持尽可能多的浏览器和版本。并非所有浏览器版本都支持每个 CSS 规则。

Answer 2

兼容性，并非所有浏览器都支持各种css。

但除此之外，我认为您已经做到了，CSS 确实是正确的选择。

编辑：公平地说，有些人选择使用 sprite sheets 本质上是加载一张大图片，然后剪切不同的图像 sheet 以获得所需的外观。

另一个好处可能与分解工作有关。例如，美术师可能负责设计图像（或按钮或其他）的外观，并且可以轻松上传和替换图像，而程序员 可以把它们放到哪里去。

两者各有好处，但最终还是要看个人喜好和环境。

Answer 3

在这种情况下，css 是正确的选择。

我这样说是因为即使在旧浏览器中，您也会失去边框上的圆角，即使那样（带有前缀）这只会影响 less than 10% of browsers。而且这个数字只会随着时间的推移而下降。

最好支持明天的浏览器而不是昨天的浏览器，除非你有一个必须服务的用户群，他们使用旧浏览器（可能在大公司的内部网上，或者在技术经常被回收和捐赠的国家）其中首先要考虑的是使事物具有功能性和可用性，而不是看起来与最新的浏览器完全相同。这称为 graceful degradation，渐进增强的近亲（从 link 上的 W3C 了解两者）。

这 article is also useful，特别是那些可能希望在 IE6 中使用圆角的客户。

哦，当然，你的图形中的图像还有一个目的:-)

如果可以严格使用 CSS 重新创建图像，那么该图像还有用吗？

If an image can be recreated using strictly CSS, is there still a purpose for that image?

css

coding-style

image

responsive-design