我有一个网站,它将许多图像显示为背景图像,使用background-size: cover它们的大小来完全填充元素,同时裁剪掉不适合的图像的任何部分.
问题是这些图像不是纯粹的装饰.它们是页面信息内容的重要组成部分.这意味着他们需要alt文本才能被屏幕阅读器和其他辅助技术访问.
alt向背景图像添加描述的最具语义的方法是什么？
article {
position: relative;
width: 320px;
margin: 5rem auto;
}
figure {
width: 100%;
height: 180px;
/* not accessible */
background-image: url('http://www.fillmurray.com/300/300');
background-size: cover;
background-position: center;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<article class="panel panel-default">
<header class="panel-heading">
<h4 class="panel-title">Title of Article</h4>
</header>
<div class="panel-body">
<figure class="article-image"></figure>
</div>
<footer class="panel-footer">
<a class="btn btn-default" href="#">Read</a>
</footer>
</article>