问题标签 [image-replacement]

我刚刚了解了图像替换、技术，或者更确切地说，我只是在学习，因为我在 Bootstrap 中看到了它的 mixin。我最近看到它出现了几次，所以我决定调查一下。我找到了这篇文章，但我承认我不明白所有的大惊小怪是什么。为什么不在要“替换”的文本上放置一个 IMG 标签？

我目前正在帮助一位朋友在一个数据库驱动的网站上重新组织数百张图像。我已经离线生成了一个新的、重组的图像路径列表，并希望用新路径替换数据库的 sql 导出中的每个匹配图像引用。

编辑：这是我想要实现的一个例子

new_paths_list.txt是我在将所有现有图像组织到文件夹后使用批处理脚本生成的文件。在此之前，所有图像都在几个文件夹中。此生成列表的示例可能是：

my_exported_db.sql （从网站导出的数据库）的示例可能是：

我想要的结果是my_exported_db.sql是：

一些伪代码来说明：

1/ 在 my_exported_db.sql 中找到第一个图像名称，例如 'snom_xyz.jpg'。

2/ 在 new_paths_list.txt 中找到相同的图像名称

3/ 如果存在，复制整行（路径和文件名）

4/ 将此图像的 my_exported_db.sql 中的整个路径替换为复制的行

5/ 对 my_exported_db.sql 中的所有其他图像名称重复

似乎与图像名称匹配的正则表达式是：

([^)''"/])+\.(?:jpg|jpeg|gif|png)

和一个匹配图像名称，完整的路径（相对或绝对）是：

\bdata[^)''"\s]+\.(?:jpg|jpeg|gif|png)

我环顾四周，发现 Sed 或 Awk 可能能够做到这一点，但一些指针将不胜感激。我知道这只有在没有重复文件名的情况下才能正常工作。

我是个菜鸟，所以请放轻松。

我试图将一个图像替换为第二个图像，同时将鼠标悬停在不同的元素上。我的问题是只有第一个图像被链接图像替换。我给每个图像一个 ID，我只是不知道如何应用它。

提前感谢您提供的任何帮助！

这是我到目前为止所拥有的：

脚本：

HTML：

我的 HTML 是这样的：

我正在使用 fontello 图标字体系统，但是，我似乎无法弄清楚如何让 Facebook 一词消失而图标仍然存在！生成的内容如下所示：

谢谢

（注意：我知道我可以在文本中添加一个跨度并切换它，但我认为可能有一种纯粹的 CSS 方式来做到这一点？）

你好，比我聪明得多的人。

在标题调整大小期间，我已经能够使用 jQuery 和 CSS 以几种不同的方式进行图像交换。我目前正在使用以下代码来调整我的标题：

这工作得很好，我已经能够整理出其他所有东西（菜单等）

我遇到麻烦的地方是使图像交换之间的过渡看起来“漂亮”。

我已经尝试使用这里的示例：JS/jQuery swap image on scroll event，效果很棒，除了图像交换会立即发生，我已经尝试了几个小时让它们褪色，或者向左和顶部滑动，或使用 CSS 类更改不透明度和显示：隐藏/带有过渡的块（但它使用 css 闪烁），或以其他方式动画。

但是，唉，我失败了，我发现此时我除了寻求帮助之外别无选择。

我真正想做的是模仿这个：http ://www.joomlashine.com/joomla-templates.html

动画流畅而干净，如何完成类似的事情让我望而却步。

我需要更多的声誉才能将网址发布到我正在使用的图像上，但如果有帮助，我可以通过电子邮件发送它们，或者以其他方式将它们发送给你们。

这已经很长了，但是如果有人觉得有必要让我更加尴尬，我可以发布我尝试这样做的所有失败尝试；）

谢谢大家！

泰勒。

有很多技术可以用背景图像实现图像替换，但我发现自己越来越多地使用内联 SVG（主要是因为我可以使用 CSS 操作它的组件）。

然而，在文本内容对 SEO 很重要的地方（如链接和标题），仅 SVG 并不能削减它。是否有任何等效的技术允许在视觉上隐藏标题或锚中的文本，同时不影响内联 SVG。

注意：我知道 Google 确实索引 SVG，但它似乎很随意，即使自由使用<title>and 也是如此<desc>。

您好，只是想知道是否有人对无法在手机/平板电脑上运行的文本隐藏类有问题。它的元素似乎被 Boostrap 自己的 CSS 主要是“颜色”和“字体大小”属性覆盖。我发现如果我把它放在我的自定义 CSS 中并给它一个更具体的选择器名称就可以了！在这种情况下，我将其应用于“导航栏品牌”以使用徽标作为背景图像并隐藏文本。

有一个内置的图像替换类很棒，但奇怪的是它被自己的 CSS 覆盖。

谢谢

我想用图像替换列表项。

我要替换的列表项是第一个列表项 class="main-logo"。

我的问题如下。

1.我是在.main-logo还是.logo上进行更换？2.用图像替换列表项的最佳技术是什么？3. 如果我想调整列表项的行高，我是调整li 类、nav 类还是a 类？

谢谢！

http://jsfiddle.net/codermax/fe0L3d08/4/

CSS 代码。

我创建了一个幻灯片，可以在点击图像之前和之后切换。我还试图让每个图像的标题在每次点击时同时更改。它适用于每个单独的图像，但是当用户移动到下一张幻灯片时，文本保持在上一张幻灯片的状态。因此，即使所有幻灯片都使用之前的图像开始，如果用户在文本读取“之后”时进入下一张幻灯片，它会继续读取“之后”。

如果可能，请让我知道编写这些函数的更简洁的方式。（我想必须有一种方法可以在一个函数中编写它）。我还尝试编写一个新函数来更改文本，因为每个图像都是相同的，但我遇到了同样的问题：

我发现 kellum 方法并不真正适用于 html 按钮元素。更准确地说，它可以工作，但需要更多的文本缩进。回顾一下，这是技术：

对于按钮元素，我必须进行更多的文本缩进，比如 200%，这取决于，它似乎没有特定的规则，但肯定超过 100%。为什么？