css - 响应式 CSS：我可以强制呈现 alt 文本吗？

Question

我正在为我正在构建的网站整理一些响应式 CSS，我很好奇是否可以使用 CSS 强制图像呈现为 alt 文本而不是图像。我们正在展示共同赞助商的标志，但由于它们的大小不一，很难自信地将它们融入响应式设计中。出于这个原因，我们希望将公司名称存储为替代文本并进行渲染。当然，我们可以将名称放在单独的元素中并使用 CSS 切换可见性，但使用 alt 文本似乎更干。

Answer 1

您可以将其存储在数据属性而不是替代文本中，然后执行以下操作：

<span class='responsive' data-alt='foo'>
    <img src='http://www.ponyfoo.com/img/thumbnail.png' alt='' />
</span>

@media only screen and (max-width: 300px) {
    .responsive:before {
        content: attr(data-alt);
    }
    .responsive img {
        display: none;
    }
}

您不能仅使用 CSS 和img标签来执行此操作的原因是img标签是因为它们被替换为元素，这意味着 pseudo 不适用于它们，因此 using:before不适用于它们。

考虑到这一点的另一种方法如下：

<span class='responsive'>foo</span>

.responsive {
    background-image: url('http://www.ponyfoo.com/img/thumbnail.png');
    text-indent: -9999em;
    overflow: hidden;
    width: 180px;
    height: 180px;
    display: block;
}

@media only screen and (max-width: 300px) {
    .responsive {
        background-image: none;
        text-indent: initial;
        overflow: initial;
    }
}

如果你问我，我更喜欢第二种方法。

Answer 2

一起去：

<div class="cobranding">
    <span>Brought to you by</span>
    <span class="sponsor">Joe Shmoe Inc.</span>
    <img src="img/graphics/joe_shmoe_logo.jpg">
</div>

使用 CSS 根据响应断点切换 img 或“赞助商”的可见性。

Nico 的两种方法看起来都不错。唯一的问题是这些共同赞助商徽标将通过 CMS 添加，因此我想避开任何涉及个案 CSS（:before 或 background-image）的解决方案。为了时间的缘故，我继续使用上面的两个元素策略。

Answer 3

(answered for any others looking for a solution)

Important aside: Remember the purpose of alt: to display meaningful ALTERNATIVE information (if the image doesn't load). - so any implementation should not break that... (bad for accessibility & SEO).

That said... If the image doesn't load, the alt will be displayed. So (untested) but you could try messing up the src attribute by javascript... this should cause the browser to display the alt since the image wont load. - you might find this approach along with lazyload useful.

Also to note: a broken img doesn't behave like an image, so you can apply a img:before css rule (and use content: attr(alt) )