问题标签 [image-replacement]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
255 浏览

html - 水平对齐图像替换文本

也许我今天有点厚,但我需要一些 CSS 帮助。我正在制作一个看似简单的产品评论展示。这是一个 div (.rating),其中有两个元素:

  1. <strong class="score fourStars">Rated 4 out of 5 stars</strong>
  2. <span class="reviewsCount">average from 34 reviews</span>

HTML片段:

CSS

问题

我已经很好地从精灵中得到了这个东西。现在的问题是如何让它集中对齐?!我一直在寻找 inline-block 来拯救我,但显然它必须在 IE7 上工作。该死的。

基本视觉示例

也许我错过了一些明显的东西。也许有人可以指出我的光的方向。设置 text-align: center 似乎只对齐评论部分的数量,而不是图像替换的评论星。

帮助...

0 投票
1 回答
7498 浏览

html - html5boilerplate 中的响应式徽标(图像替换)

我正在通过 initializr.com 使用响应版本的 html5 样板。我的网站使用自定义徽标,因此我将 .ir 类添加到 h1

像这样

文件说_

将 .ir 类添加到您应用图像替换的任何元素。用图像替换元素的内容时,请确保还设置特定的背景图像:url(pathtoimage.png);、宽度和高度,以便显示替换图像。

所以我在代码中添加了这些行

问题是特定的宽度和高度。我无法摆脱它们,但徽标不会以这种方式响应。想法?这是小提琴。http://jsfiddle.net/qeW3e/

0 投票
1 回答
163 浏览

html - H1 图像替换出现在除 ie 之外的所有浏览器中?

我已经设法让我的标题作为 ff、safari 和 opera 中的链接以及 css 图像替换

我正在尝试在 IE 中优化该网站,这是我在周一启动它之前的最后一步,但徽标根本没有出现在 IE 8 或 9 中,但它在 IE 7 中却非常令人惊讶。我设法得到了通过使 display inline-block 出现在 IE9 中的徽标

当我这样做时,图像不再是链接,有人知道如何解决这个问题吗?我会将图像放在 HTML 中,而不是使用图像替换,但是从 SEO 的角度来看,使用图像替换更好。

0 投票
3 回答
254 浏览

jquery - 悬停时用 div 替换图像

看起来很简单,但我无法让它工作。

div 包含 facebook / twitter 链接。它应该工作的方式是显示图像,然后当有人将鼠标悬停在其上时,它会消失并被社交图标取代。

我有代码可以处理 div 中的文本,但是一旦我添加图像/脚本,它似乎就坏了。(我得到的代码也没有图像消失,这是我还没弄清楚该怎么做的事情)。

这是我所拥有的:

使用以下CSS:

这是在 jsfiddle 上:http: //jsfiddle.net/randomlysid/dxwma/1/

如果可能的话,我想用 css 来做这件事,因为那是我所熟悉的,但如果 jQuery 是完成它的唯一方法,那也可以。

谢谢!

0 投票
1 回答
187 浏览

html - 图像替换和文本对齐:右

我正在尝试实现图像大小调整技术,它们都工作得很好——也就是说,直到你弹出一个:

示例:http: //jsfiddle.net/mAGhh/

以前有没有人处理过这个问题?我当然可以包装所有元素并使用图像替换,但我很确定我会遇到内联问题......

0 投票
1 回答
2423 浏览

css - 如何使用带有内联元素的 HTML5 Boilerplate ir 类?

我正在使用 HTML5 Boilerplate css,我想将该ir类应用于我的页脚菜单。菜单在一个列表中,我使用 inline-block 水平显示这个列表。

这是代码的小提琴。您可以看到图像替换有效,但后面的文本菜单元素(没有图像)被翻译到底部。这是由于.ir:beforecss 规则模拟了占用一些空间的块元素。

有没有办法在没有这种副作用的情况下使用 HTML5 Boilerplate 技术?如果没有,我将回到text-indent:-9999px技术上。

额外的问题:与文本缩进相比,HTML5 样板技术有什么好处?

0 投票
1 回答
95 浏览

css - CSS :hover 在我将鼠标悬停在 AROUND 而不是 div 元素上时响应

我遇到了一个微妙但令人讨厌的问题:我正在尝试使用 CSS 图像替换来实现“关闭”交叉。HTML是

这里的图像是一个 30 像素 x 30 像素的透明正方形。CSS是

这两个图像是透明的 30px x 30px 正方形,其中有一个蓝色和红色的“关闭”十字。结果效果不是很好,因为:hover似乎只对我徘徊而不是div. 请在此处查看演示。

我在这里做错了什么?

0 投票
0 回答
76 浏览

css - 使用 Kellum 方法和搜索文本时出现奇怪的图像替换错误

我在Kellum方法中发现了一个奇怪的错误:

基本上在 webkit 中,如果您按 CTRL+F 并搜索Hello文本会返回到视图中(按几次输入以循环浏览它),这在使用它进行图像替换等时会出现问题。如果可能的话,如何解决这个问题,同时保留使用“Kellum”方法?

http://jsfiddle.net/4d5H6/

0 投票
0 回答
137 浏览

docx - 在 docx 中将图像彼此相邻放置

- 分页符 -

图像元素

在这种情况下发生的情况是,用于审核的所有图像都在页面上呈现在彼此下方。我希望图像水平渲染并在达到文档宽度时继续下一行。

编辑

当我把所有东西都写[audit_sub1; block=begin;][audit_sub1; block=end;]一行上时。我得到以下结果:

  • 图 1 位于左上角(正确)
  • 图像 2 位于图像 1 旁边(正确)
  • 图像 3 在图像 1 上渲染(不正确,我希望它在新行上渲染,因为已达到宽度)
0 投票
0 回答
3062 浏览

html - Firefox 的 CSS 图像替换

嗨,我正在使用以下代码使用 CSS 替换我网站上的图像:

此代码适用于 safari 和 chrome。我只是想知道有没有人知道我可以用来在 Firefox 中做同样工作的任何代码?