使用 CSS 将文本替换为图像是一种众所周知的做法。 CSS-Tricks 拥有一些技术的博物馆 ( http://css-tricks.com/examples/ImageReplacement/ )。
但这些都不允许替换为流畅的图像(例如,一个 Logo 横跨 100% 的流畅页面布局)。是否可以使用 CSS 进行流畅的图像替换?
几乎所有图像替换技术都使用背景图像。而且我知道您可以设置 background-size: 100%
。但要使文本元素的高度与其宽度成比例并不简单,因为浏览器不会将背景图像视为内容的一部分。
我知道任何常见的图像替换技术都可以轻松地与媒体查询结合使用,以逐步将文本元素的大小更改为有效的特定高 x 宽比。但这是渐进的,而不是流动的。
我确实找到了一篇讨论这个的博客文章 ( http://viljamis.com/blog/2011/fluid-image-replacement.php )。但事实证明,thay 方法实际上需要将图像放入 html 内容中。我正在寻找真正的文本替换。
最佳答案
花了一些时间,但我想出了一个办法。关键是使用填充百分比来设置高度,因为 padding-top
和 padding-bottom
百分比与容器宽度相关(不同于 height
,与容器高度相关联)。
html
<h1 class="logo">The Logo</h1>
CSS
h1.logo {
background-image: url('logo.png');
background-size: 100%;
width: 100%;
padding-top: 29.8%;
height: 0;
text-indent: -9999px;
}
其中,padding-top
的计算方法是将图像高度除以宽度。
工作示例:http://jsfiddle.net/bXtRw/
我会注意到使用 overflow: hidden
而不是 text-indent: -9999px
也应该有效。但是我在 Firefox 中的行为不稳定。
此外,使用 font-size: 0
而不是 height: 0
会在 Firefox 中产生不稳定的行为。
关于CSS流体图像替换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16721583/