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

Question

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

Answer 1

您可以将其存储在数据属性而不是alt文本中,然后执行以下操作:

<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标记是因为它们是替换元素,这意味着伪不能使用它们,因此,使用: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;
    }
}

如果你问我,我更喜欢第二种方法.