響應式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：我可以強制渲染替代文字嗎？

回答

相關問題