Tumblr 的逐像素箭头
如果您查看这里：
http://www.tumblr .com/explore
您会注意到“探索”菜单项上方的背景框和小三角形。我非常喜欢 Tumblr 的设计，所以我一直在努力从中学习。当我使用 Chrome 方便的开发人员工具时，我看到，对于这个小三角形，他们是逐像素“绘制”的。它们每像素高 6 个 div。第一个是 11 像素宽，第二个是 9 像素，第三个是 7 ......
这在我的脑海中引发了各种小信号，但我才刚刚进入 Web 开发，所以我想我应该问了解更多的人关于它。
那么，各位专业人士，使用 HTML 元素而不是使用图像进行逐像素设计的优点和缺点是什么？
If you check out here:
You'll notice the background box and little triangle over the "explore" menu item. I absolutely love Tumblr's design, so I've been trying to learn what I can from it. When I used Chrome's handy developer's tools, I saw that, for the little triangle, they "drew" it pixel by pixel. They have 6 divs a pixel tall. The first is 11 pixels wide, the second is 9, the third 7...
This raises all sorts of little flags in my head, but I've only just gotten into web development, so I figured I would ask people who know more about it.
So, all you pros out there, what are the pros and cons of doing a design pixel by pixel with HTML elements instead of using an image?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
优点是它在各个浏览器中都是相同的，甚至是 IE6，并且它不会对背景图像方法发出额外的 HTTP 请求。
当然，缺点是 HTML 和 CSS 权重增加、语义减少以及代码看起来更混乱。即使使用图像，更好的替代方案是使用伪元素，其形状看起来像三角形。它不会破坏干净的代码或语义。
The advantages are that it will be identical across browsers, even IE6, and it doesn't make an extra HTTP request for the background image method.
The drawback, of course, is an increased HTML and CSS weight, decreased semantics, and a messier-looking code. A better alternative, even to using an image, would be to use a pseudo-element, shaped to look like a triangle. It wouldn't take away from a clean code, or semantics.
虽然正如其他人指出的那样，这确实在 IE6 中实现了透明度，但这并不是很有说服力，因为您始终可以为此应用程序使用透明的 GIF。
我想说，这个 hack 是为了减少对服务器的一次调用。这有两个主要好处：
另一种方法是使用包含透明 PNG 的数据 URL。更好的是它不依赖于 hack，但更糟糕的是 IE6 和 IE7 不支持它。更常见的做法是将页面使用的所有图像捆绑在精灵图像中，并使用带有
background-position的 CSS 背景来裁剪出精确的图像。这样做的缺点是仍然需要网络调用，但如果您不需要 IE6 或 IE7，则可以与数据 URL 捆绑在一起。当然，缺点是这是一种黑客行为，不是正确的做事方式。
总结：
优点
缺点
我个人很喜欢它，如果有必要的话我完全会做类似的事情。
While this does achieve transparency in IE6 as others point out, this is not very convincing since you could always use a transparent GIF for this application.
I would say that this hack is here to have one less call to the server. This has two main benefits:
An alternative would be to use a data URL holding a transparent PNG. This is better in that it doesn't depend on a hack but worse in that IE6 and IE7 can't support it. A more common practice is to bundle all images used by the page in a sprite image and use CSS backgrounds with
background-positionto crop out the exact image. This has the disadvantage of still requiring a network call but could be bundled with a data URL if you don't need IE6 or IE7.The disadvantage of course is that this is a hack and isn't the right way of doing things.
In summary:
PROS
CONS
I personally love it and would totally do something like it if I had to.