问题标签 [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.
html - 水平对齐图像替换文本
也许我今天有点厚,但我需要一些 CSS 帮助。我正在制作一个看似简单的产品评论展示。这是一个 div (.rating),其中有两个元素:
<strong class="score fourStars">Rated 4 out of 5 stars</strong>
<span class="reviewsCount">average from 34 reviews</span>
HTML片段:
CSS
问题
我已经很好地从精灵中得到了这个东西。现在的问题是如何让它集中对齐?!我一直在寻找 inline-block 来拯救我,但显然它必须在 IE7 上工作。该死的。
基本视觉示例
也许我错过了一些明显的东西。也许有人可以指出我的光的方向。设置 text-align: center 似乎只对齐评论部分的数量,而不是图像替换的评论星。
帮助...
html - html5boilerplate 中的响应式徽标(图像替换)
我正在通过 initializr.com 使用响应版本的 html5 样板。我的网站使用自定义徽标,因此我将 .ir 类添加到 h1
像这样
文件说_
将 .ir 类添加到您应用图像替换的任何元素。用图像替换元素的内容时,请确保还设置特定的背景图像:url(pathtoimage.png);、宽度和高度,以便显示替换图像。
所以我在代码中添加了这些行
问题是特定的宽度和高度。我无法摆脱它们,但徽标不会以这种方式响应。想法?这是小提琴。http://jsfiddle.net/qeW3e/
html - H1 图像替换出现在除 ie 之外的所有浏览器中?
我已经设法让我的标题作为 ff、safari 和 opera 中的链接以及 css 图像替换
我正在尝试在 IE 中优化该网站,这是我在周一启动它之前的最后一步,但徽标根本没有出现在 IE 8 或 9 中,但它在 IE 7 中却非常令人惊讶。我设法得到了通过使 display inline-block 出现在 IE9 中的徽标
当我这样做时,图像不再是链接,有人知道如何解决这个问题吗?我会将图像放在 HTML 中,而不是使用图像替换,但是从 SEO 的角度来看,使用图像替换更好。
jquery - 悬停时用 div 替换图像
看起来很简单,但我无法让它工作。
div 包含 facebook / twitter 链接。它应该工作的方式是显示图像,然后当有人将鼠标悬停在其上时,它会消失并被社交图标取代。
我有代码可以处理 div 中的文本,但是一旦我添加图像/脚本,它似乎就坏了。(我得到的代码也没有图像消失,这是我还没弄清楚该怎么做的事情)。
这是我所拥有的:
使用以下CSS:
这是在 jsfiddle 上:http: //jsfiddle.net/randomlysid/dxwma/1/
如果可能的话,我想用 css 来做这件事,因为那是我所熟悉的,但如果 jQuery 是完成它的唯一方法,那也可以。
谢谢!
html - 图像替换和文本对齐:右
我正在尝试实现图像大小调整技术,它们都工作得很好——也就是说,直到你弹出一个:
示例:http: //jsfiddle.net/mAGhh/
以前有没有人处理过这个问题?我当然可以包装所有元素并使用图像替换,但我很确定我会遇到内联问题......
css - 如何使用带有内联元素的 HTML5 Boilerplate ir 类?
我正在使用 HTML5 Boilerplate css,我想将该ir
类应用于我的页脚菜单。菜单在一个列表中,我使用 inline-block 水平显示这个列表。
这是代码的小提琴。您可以看到图像替换有效,但后面的文本菜单元素(没有图像)被翻译到底部。这是由于.ir:before
css 规则模拟了占用一些空间的块元素。
有没有办法在没有这种副作用的情况下使用 HTML5 Boilerplate 技术?如果没有,我将回到text-indent:-9999px
技术上。
额外的问题:与文本缩进相比,HTML5 样板技术有什么好处?
css - CSS :hover 在我将鼠标悬停在 AROUND 而不是 div 元素上时响应
我遇到了一个微妙但令人讨厌的问题:我正在尝试使用 CSS 图像替换来实现“关闭”交叉。HTML是
这里的图像是一个 30 像素 x 30 像素的透明正方形。CSS是
这两个图像是透明的 30px x 30px 正方形,其中有一个蓝色和红色的“关闭”十字。结果效果不是很好,因为:hover
似乎只对我徘徊而不是在div
. 请在此处查看演示。
我在这里做错了什么?
css - 使用 Kellum 方法和搜索文本时出现奇怪的图像替换错误
我在Kellum方法中发现了一个奇怪的错误:
基本上在 webkit 中,如果您按 CTRL+F 并搜索Hello
文本会返回到视图中(按几次输入以循环浏览它),这在使用它进行图像替换等时会出现问题。如果可能的话,如何解决这个问题,同时保留使用“Kellum”方法?
docx - 在 docx 中将图像彼此相邻放置
- 分页符 -
图像元素
在这种情况下发生的情况是,用于审核的所有图像都在页面上呈现在彼此下方。我希望图像水平渲染并在达到文档宽度时继续下一行。
编辑
当我把所有东西都写[audit_sub1; block=begin;]
在[audit_sub1; block=end;]
一行上时。我得到以下结果:
- 图 1 位于左上角(正确)
- 图像 2 位于图像 1 旁边(正确)
- 图像 3 在图像 1 上渲染(不正确,我希望它在新行上渲染,因为已达到宽度)
html - Firefox 的 CSS 图像替换
嗨,我正在使用以下代码使用 CSS 替换我网站上的图像:
此代码适用于 safari 和 chrome。我只是想知道有没有人知道我可以用来在 Firefox 中做同样工作的任何代码?