如何将CSS用于响应式站点，同时仍然在图像上提供ALT文本，以便我的站点可以访问？
如何将CSS用于响应式站点，同时仍然在图像上提供ALT文本，以便我的站点可以访问？
提问于 2016-11-02 00:49:45
我有一个网站上的页面顶部的图像。该网站完全响应。
对于桌面视图，我为站点上的标题加载了一个特定的图像。对于移动视图，我有一个不同的图像。
在CSS中，我使用如下内容：
.headerimage { background:url(/images/header-desktop.png) no-repeat top left; }
@media only screen and (max-width: 480px) {
.headerimage { background:url(/images/header-mobile.png) no-repeat top left; }
}在超文本标记语言中，它只是<div class='headerimage'></div>
我的问题是:我如何添加ALT文本(就像我将添加到IMG)标签，使我的网站完全可以被屏幕阅读器访问，我获得了alt文本的SEO好处，等等？显然，我可以切换到使用IMG标签，但一旦我有两个IMG标签要处理，这将需要一些严重的技巧来保持响应。
回答 3
Stack Overflow用户
发布于 2016-11-02 01:00:31
HTML5引入了the picture element，它允许你指定一系列带有媒体查询的图像。
<picture>
<source srcset="/images/header-mobile.png" media="only screen and (max-width: 480px)">
<img src="/images/header-desktop.png" alt="Foo">
</picture>Stack Overflow用户
发布于 2016-11-02 01:00:13
你不能不求助于Javascript AFAIK。
如果只使用CSS，那么在代码中对背景图像进行一些描述的最佳选择就是在DIV标记中使用title属性。
请看这里：
CSS background image alt attribute
CSS or Javascript - display fallback text if background image not loaded
Stack Overflow用户
发布于 2016-11-02 01:03:36
添加一个破损的图像，一个黑客。
伪元素适用于损坏的图像。Read here
使用伪元素显示断点上的其他图像。
img::before {
content: "";
background-image: url('http://lorempizza.com/200/200');
width: 200px;
height: 200px;
display: block;
position: absolute;
}
@media (max-width: 400px) {
img::before {
background-image: url('http://placehold.it/200X200')
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40364685
复制相关文章
相似问题
腾讯云开发者
