以下是 Marcel Shields 的客座文章。Marcel 遇到了一个难题，需要更改页面上的图像，但无法访问 HTML。这种情况很少见，但我相信我们都遇到过类似的奇怪情况。他解释了如何在不访问 HTML 或 JavaScript 的情况下替换该图像。事实证明，这还是一种替换 **任何内容** 为图像的非常好的方法。
我只是想分享一些关于使用 CSS box-sizing 的非常酷的事情。Chris 几年前写了一篇 非常好的介绍，如果您不熟悉该属性，可以了解一下。在考虑布局时，它使事情变得更加合理。人们非常喜欢它，他们就像热辣酱一样 将其应用于所有内容。我想分享一下我如何发现它作为另一种图像替换技术的实用性。
几天前在工作中，我被要求用托管在其他地方的另一个图像替换我们网站上的一个 <img>。很简单，对吧？但问题在于我无法替换标记，因为它已经部署到生产环境中，但我可以通过我们的 CMS 注入 CSS 或 JS。无论我选择哪种技术，它都将插入到所有网站页面中。我只需要在一个特定的页面上进行操作，并且父容器的属性对所需的页面并不特定。
<head>
<title>Really Cool Page</title>
</head>
<body>
<!-- .header would be across site on other pages with different children, so no background image adding -->
<div class="header">
<img class="banner" src="//notrealdomain1.com/banner.png">
</div>
</body>使用 JavaScript 可以轻松做到这一点，但我希望看看是否有其他更简单的方法。在 Chrome 开发者工具中经过几次迭代后，我想到了使用 box-sizing 属性来保持尺寸严格，添加新图像作为背景图像，并使用填充将内联图像推离，看看会发生什么。
/* All in one selector */
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}效果非常好。以下是酷炫之处
- 它几乎适用于任何元素，甚至包括空的元素，例如 <img> 或 <hr>
- 浏览器支持非常好（Chrome、Firefox、Opera、Safari、IE8+）https://caniuse.cn/#feat=css3-boxsizing
- 避免使用对 SEO 不友好的 display: none 或其他属性
最后一点似乎很重要，因为它对于文本替换也非常有效，无需任何调整。看看吧！
就标签而言，这是一个不错的发现。
就文本替换而言，如果高度设置为 0px 并且 padding-top 设置为 250px 且 overflow 隐藏，同样的方法在没有 box-sizing 的情况下是否也能工作？
是的，据我所知，0px 高度对于文本替换也能工作，我只是指出了一种双重用途。特别是如果您遵循 *{box-sizing:border-box} 运动，您只需要将尺寸、背景图像和填充添加到选择器即可。感谢您的评论。
对我有用，而且非常简洁
如果可以在 img 元素上使用 :before / :after 就好了 :P
使用 box-sizing: border-box 而不是 width: 0 的原因是什么？（Gareth 已经提到过这一点）
在您的图片中，看起来您好像在勒住那条鳄鱼……
我可能有点害怕会失去一根手指，但我向您保证，没有动物受到伤害！；)
我目前没有想到反对它的真正理由。老实说，我只是发现这种方式是一种多用途的选择。是的，伪元素也尝试过，但结果并不理想。
简单有效，Chris。
您可以简单地使用
img { content: url(); }替换 <img> 标签中的图像：http://codepen.io/scottkellum/pen/jvtdr无需任何其他背景或尺寸样式。
即使在 Firefox 21 中，这也不起作用，但我希望它能起作用！
太酷了！在 Chrome 中运行良好。
但是如果 Chris 是正确的，那么浏览器的支持目前仍然很糟糕。
Firefox 仍然不支持吗？太糟糕了，我应该先检查一下。
Firefox 21 仍然不支持 flexbox，就像 v20 一样。它仅在 Nightly v23 版本中受支持，也许他们也会修复此问题。
您好，
我一直认为它在某些浏览器中工作是一个错误。在我看来，CSS content 不应该用于替换内联内容，这是一个棘手的谎言，为什么我们不能有一个明确的规则，例如：替换呢？
这只是我的观点 :)
Firefox 不支持这一点并不奇怪——这违反了规范。
这在 Chrome 上有效，但在 Firefox/IE 上无效。
对于图像来说，这似乎是一个很棒的解决方案！我注意到的唯一问题是，在文本替换中，旧文本仍然可以选择。这不是一个大问题，但在某些情况下可能会出现问题。
我认为不需要“box-sizing”。当“现代浏览器”指的是 IE6 时，我写了一些关于 img 内的背景图像 的内容；)
查看此笔：width 或 height = 0 + padding 可以解决问题
认为这可以用于在特定断点处替换图像吗？
Keith，我认为这可能是交换内联图像的一种方法，直到他们完成 picture 元素 http://picture.responsiveimages.org/。
这是否仍然存在两个图像都被下载的问题，因为图像仍然存在，只是对用户不可见？
是的，无论如何，这两个图像都将被下载，在这种情况下，这仅仅是一个外观上的修复。
怪开发人员和 CMS 管理员 ><，对吧，Marcel？哈哈
是的，Kyle 和 Ricardo，在这种情况下，两者都将被下载。（例如，测试 #1 @ http://timkadlec.com/2012/04/media-query-asset-downloading-results/）
如果您使用 min-widths，较大的图像是否只会加载到较大的屏幕上，例如可能具有更快速连接的桌面电脑？
哇，替换图像的方式非常巧妙，感谢您的见解 :)
对于 文本替换，我通常使用
—
现在，本着改进这篇实用文章的精神，您关于 display:none; 对 SEO 不友好的论点是不正确的。
使用 display:none; 不会对 SEO 产生任何负面影响，至少在未来很多年内都不会产生。
display:none;被用于太多场景，不应被视为“黑帽”SEO技巧：它被用于各种小部件、选项卡、手风琴、滑块、幻灯片、旋转木马、灯箱，当然还有图像/文本替换技术。查看Stackexchange.com上的这个论坛。
以及css-tricks.com上的另一个论坛。
如果您能编辑文章中的第三个项目，避免误导读者，那就太好了 :)
再次感谢！
感谢Ricardo的赞美！
关于SEO方面，StackExhange链接引用了Google的话：“仅仅使用display:none不会自动触发惩罚。关键在于是否存在一种机制——无论是自动的还是由用户触发的——使内容可见”。这里没有可用的机制，因此它并没有完全反驳我对在特定情况下使用它的说法。但我可以同意其他观点，并且非常乐意说它“可能对SEO不利”。怎么样？
嗨，Marcel，
感谢您的回复。
好吧，问题是
display:none;根本没有任何负面的SEO影响，因此假设“有可能”它会产生负面影响是一个完全错误的假设/陈述。我尽量将我们的对话保持在Chris帖子主题的范围内，所以我不会走“他说——她说”的路线:p，但我引用Stackexchange论坛的唯一原因是，想要展示关于这个主题已经讨论了这么久，但没有任何关于负面SEO影响的实际证明。
我理解这个主题的方式很简单：是我们自己对“隐藏”内容概念的偏见，造成了使用
display:none;“隐藏”某些内容时会被Google（或任何搜索引擎）惩罚的恐惧，而实际上我们所做的只是“延迟”显示，或者像你在练习中那样，用一个对象替换另一个对象。如果您至少可以在文章中引用我们的讨论，这样人们就可以自己决定是否使用
display:none;是合适的……随便说说 :)
再次感谢！
好吧，Roman Komarov又名kizu几年前开发了
<img>替换。查看“text-indent是否也缩进<img>？”的答案。
酷！ :)
但是，要将文本替换为图像，我会使用
text-indext确保您要替换的内容不是真正需要删除的，而不仅仅是隐藏的。也许这很明显，但双击上面Code Pen中的Shop Talk徽标会选中被填充的文本，Chrome会提供定义该术语的选项，占位符文本可以被复制到剪贴板等。对于这个团队来说，这可能根本不值得一提，但如果出于法律或监管原因需要用图像替换文本元素的内容，然后CSS被关闭，那么这可能会让你陷入困境。
创建一个代码片段或WordPress插件来以这种方式处理视网膜图像可能会很有趣。您可以在图像之后立即在STYLE标签中输出一些CSS，用更高分辨率的图像替换它。CSS只需要包装在媒体查询中即可。我一直在使用基于JavaScript的解决方案来做到这一点，但这似乎会更好。
有人有想法吗？
我真的很喜欢这个想法。在没有太多思考或实验的情况下，我认为它应该运行良好。
很酷的技术！
也是一个可怕的技术。为什么可怕？好吧，让我解释一下。就在15分钟前，我还在读一篇关于网站安全的文章，现在我正在读这篇文章。我想你可能已经猜到这两件事在我的脑海中是如何联系起来的。想象一下，一些恶意人士想从你合作伙伴的横幅广告中劫持一些流量。他唯一需要做的就是找到一些漏洞，将他的javascript注入你的网站。使用这个恶意脚本，他可以将横幅广告上的链接替换为他需要的链接。并且使用相同的脚本，他可以注入上面的内联样式，用一些花哨的新样式替换初始横幅图像，可能更合适，使其看起来不那么可疑。
你能想象css-tricks或smashingmagazine试图用他们的广告卖给你小猫或冰箱吗？是的，听起来很荒谬！
附注：如果你看到Chris试图卖给你小猫，请拉响警报！
随便说说 :)
嗨，Marcel，首先我要感谢你写这篇文章。在这个很棒的主题上有很多讨论和争论。所以这很好。我完全同意“Guille Paz”的观点，他展示了一个真正很好且易于实现的示例。
但是，要将文本替换为图像，我会使用text-indext
.text-replacement {
display: block;
height: 250px;
width: 250px;
text-indent: -100%;
overflow: hidden;
background: #333 url(‘url-string’) no-repeat;
}
@ Kyle、Ricardo、Marcel：如果使用1像素透明图像作为默认图像，并使用CSS加载相应的图像呢？那么下载两个图像并不是什么大问题，对吧？
这种方法存在三个问题
没有考虑用户、内容和用户体验。1像素透明GIF不是相关内容，因此对用户没有用:p，因此，它会影响用户体验，因为
您仍然需要处理2个HTTP请求，在这种情况下，完全没有必要使用它们，因为使用1像素透明图像是一种不必要的视觉/布局技巧，它会延迟页面/网站的性能。而且无论1像素透明图像只有几字节，都建议避免HTTP请求本身。
查看One Less JPG，了解如何删除图像（或使用Moderinzr有条件地加载图像）对网站性能有益的清晰示例。
不利于SEO。我并不是说它会产生负面的SEO影响。我的意思是它不利于SEO，因为图像有助于补充内容，如果这个带描述性
alt和title标签的1像素透明图像只是一个1像素透明图像，它实际上并不能增强内容以提高SEO。不确定什么时候会故意使用1像素图像来替换它为另一个图像:p
感谢这个提示，我已经使用了。
有趣的一点：当我右键单击并查看图像属性时，图像的源仍然指向旧图像。
在没有border-box的情况下，这是一种仅在一个img标签内显示和切换两张图像的方法，或者悬停时进行幻灯片过渡等……；)
几个月前我一直在尝试这个，使用图像作为它自己的容器进行响应式纵横比切换。使用图像的src作为其css背景在生产环境中可能很有用（否则，两个图像下载使得这成为您需要时的一个技巧）。
如果有一种css方法可以使用图像属性作为css值，那将非常有用，但现在您需要手动在css中输入它或使用javascript。
http://codepen.io/RobW/pen/uwiKE
有趣的想法。用js很容易实现，但用css实现值得称赞。 :)
像Google搜索这样的搜索引擎不仅索引页面，还使用Chromium呈现页面的视觉外观。因此，任何替换文本或图像外观的“技巧”，并且不符合“真实”页面上下文的技巧，迟早会被特色搜索引擎禁止。
如果是这样，那么他们将禁止整个互联网。
他们可以做任何他们想做的事情。
这里http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353是Google目前暂停的一些方法。
这基本上是在图像上使用图像替换技术。我认为它不会对Google产生任何不利影响。
我的意思是“文本替换”。
认为这可以用于在特定断点处替换图像吗？