响应式CSS：我可以强制渲染替代文字吗？

我正在为一个网站建设一些响应CSS，我很好奇，如果我可以使用CSS强制图像呈现为替代文字而不是图像。我们展示了共同赞助商的标志，但由于它们的大小不同，很难让他们充满信心地适应响应式设计。出于这个原因，我们希望将公司名称存储为替代文本并进行渲染。当然，我们可以将名称放在一个单独的元素中，并使用CSS切换可见性，但使用替代文本看起来像是DRYer。响应式CSS：我可以强制渲染替代文字吗？

来源

2013-03-06 GenuineSmile29

你可能会更好过改为使用图片标题。 – BoltClock 2013-03-06 17:39:52

你可以存储在一个数据属性，而不是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; 
    } 
}

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

来源

2013-03-06 17:48:27 bevacqua

这两种方法都显示出前景。唯一的问题是这些共同赞助商标志将通过CMS添加，因此我想避开任何涉及赞助商特定CSS（：before或background-image）的解决方案。为了时间的缘故，我继续使用了两个元素策略： – GenuineSmile29 2013-03-06 18:17:02

您仍然需要在'img'上至少提供一个空的'alt'属性，这样您就不会遇到验证错误。 – BoltClock 2013-10-15 12:23:57

第二种方法不好，如果你关心搜索引擎优化，因为谷歌没有索引图像从CSS背景属性（也不会具有该图像的ALT文本具体） – xorinzor 2017-01-08 21:41:40

去与：

<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或基于响应断点的“赞助商”的知名度。

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

来源

2013-03-06 18:20:50 GenuineSmile29

看到我的更新，我的意思是使用内容：attr（data-alt）;'，不是一个固定的文本片段。这样你可以把你的“alt”放在一个数据属性中 – bevacqua 2013-03-06 18:52:54

（回答为寻找一个解决方案的任何其他人）

重要的旁白： 记住ALT的宗旨：以显示有意义的替代信息（如果图片未加载）。 - 所以任何实施不应该打破...（坏对可访问性&搜索引擎优化）。

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

另外要注意：一个破碎的IMG并没有表现得像一个形象，所以你可以申请一个IMG：CSS规则之前（和使用内容：ATTR（ALT））

来源

2016-07-29 13:17:16 codifier

响应式CSS：我可以强制渲染替代文字吗？

回答

相关问题