使用CSS替换文本为图像是一种众所周知的做法。 CSS-Tricks有一些技术展示 (http://css-tricks.com/examples/ImageReplacement/)。
但是,这些技术都不允许使用流体图像进行替换(例如跨越整个流体页面布局的标志)。 使用CSS实现流体图像替换是否可行?
几乎所有的图像替换技术都使用background-image。 我知道可以设置background-size:100%。 但要使文本元素的高度随其宽度进行缩放并不直观,因为浏览器不将背景图像视为内容的一部分。
我知道任何常见的图像替换技术都可以轻松地与媒体查询结合使用,以逐步更改文本元素的大小,使其具有特定的高度x宽度比例。 但这是渐进的,而不是流体的。
我找到了一篇讨论此问题的博客文章 (http://viljamis.com/blog/2011/fluid-image-replacement.php)。 但事实证明,该方法实际上需要在HTML内容中放置图像。 我正在寻找真正的文本替换。
但是,这些技术都不允许使用流体图像进行替换(例如跨越整个流体页面布局的标志)。 使用CSS实现流体图像替换是否可行?
几乎所有的图像替换技术都使用background-image。 我知道可以设置background-size:100%。 但要使文本元素的高度随其宽度进行缩放并不直观,因为浏览器不将背景图像视为内容的一部分。
我知道任何常见的图像替换技术都可以轻松地与媒体查询结合使用,以逐步更改文本元素的大小,使其具有特定的高度x宽度比例。 但这是渐进的,而不是流体的。
我找到了一篇讨论此问题的博客文章 (http://viljamis.com/blog/2011/fluid-image-replacement.php)。 但事实证明,该方法实际上需要在HTML内容中放置图像。 我正在寻找真正的文本替换。
background-image
属性,而不是整个background
简写,因为设置位置将使这个很棒的技巧失效。 - Jason