我们已经为页面顶部的树屋广告设置了标记，但还需要做一些样式工作。我们从树形图形本身开始。
我们认为使用矢量并输出为 SVG 可能很酷，因为它看起来会很清晰并且文件大小很小。观看我在 Illustrator 中折腾，试图获得一个干净的矢量版本，最终失败了。现在我们决定忘记它，只把它做成一张图片。
事实证明，Treehouse 并不再使用那个品牌，所以我很快就要更新它，我一定会花时间把它做成 SVG，即使我必须重新绘制它。
现在，我们制作 PNG 并将其使用 CSS 背景放入设计中。我们使用 background-size 将它缩小很多（虽然我又一次弄混了自己，使用了百分比——记住，当你使用百分比时，它是父元素的百分比，而不是图像本身大小的百分比）。
我们设置了颜色、大小和位置。现在，最后一步是让它在响应式设计中工作。
这个视频没有以高清录制/保存，还是 Vimeo 嵌入关闭了高清？
（到目前为止，内容很棒）
很奇怪。我重新上传了，现在好多了。感谢你的反馈！我将隐藏这条评论，因为它只是一个临时问题。
我仍然在下载文件时遇到问题。它的质量与到目前为止的其他内容相比确实很低。
是的，那个文件的大小很奇怪。我将上传一个更好的版本。
也许你以后会谈到这个，但为什么要使用 background-size？
我想你还没有谈论过你所针对的浏览器，但 IE8 不支持 background-size，所以这个广告不会很优雅地降级。
有没有什么特别的原因你没有使用带显式高度和宽度设置为图像实际大小一半的
img标签？（这样做是否适合视网膜显示屏？这样你就不必在改变容器宽度时改变图像大小。）据我所知，它们的速度几乎相同，对吧？两者都需要额外的 HTTP 请求，并且由于你在图像上设置了宽度和高度，它在图像加载时不应引起重绘。
这些观点都很公平，但是...
1) 不支持 IE 8。在像这样的网站上我可以接受。
2) 我认为
<img>作为图像形式的内容，而这只是一个背景设计特性，非常适合 CSS 背景图像。耶，去死吧，IE8！我喜欢。
对于像这样的图像，显然颜色少于 256 种，你应该将其保存为索引 png-8（gif 替代品）。你还可以拥有高达 256 级别的 alpha 透明度（与索引透明度的 gif 相反）。
唯一需要注意的是，旧版本的 Photoshop（v5 仍然没有做到！）无法正确保存 alpha 透明度（据我所知）。
Fireworks 做得很好，因为 Fireworks 很棒。
Chris，你的屏幕录制太棒了。我知道这晚了幾年，但我認為你應該記住，如果你有空看看這些評論。“那是 Kevin 在 IM 我，他是一個非常友善的人。”哈哈哈。總之，到目前為止，我學到了很多東西，我很期待未來會發生什麼！