Question

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

Answer 1

您可以将其存储在数据属性而非alt文本中，然后执行like this：

<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标记是因为它们是replaced elements，这意味着伪不能使用它们，因此，使用:before不能与他们合作。

考虑到这一点的另一种方法是the following：

<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的两种方法都很好看。唯一的打嗝是这些cosponsor徽标将通过CMS添加，所以我想避开任何涉及个案CSS（：before或background-image）的解决方案。为了时间的缘故，我继续采用上面的两元素策略。

Answer 3

（其他寻求解决方案的人回答）

重要的是： 记住alt 的目的：显示有意义的ALTERNATIVE信息（如果图像未加载）。 - 所以任何实现都不应该破坏......（对可访问性和搜索引擎优化不利）。

那说...... 如果图片未加载，则会显示 alt 。所以（未经测试），但你可以尝试通过javascript搞乱src属性...这应该导致浏览器显示alt，因为图像不会加载。 - 你可能会发现这种方法以及lazyload很有用。

另外需要注意的是：破坏的img的行为与图像不同，因此您可以应用img：before css规则（并使用 content：attr（alt））

响应式CSS：我可以强制渲染alt文本吗？

3 个答案: