css - 响应式 CSS : Can I force rendering of alt text?

Question

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

Answer 1

您可以将其存储在数据属性中而不是替代文本中，然后执行一些操作 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 ，这意味着 pseudo 不适用于它们，因此，使用 :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;
    }
}

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