HTML5 使用 sprite-sheet 图像的有效方式

Question

我有一些全球图片，我将在整个网站中使用。 HTML5 使用这些元素的正确标记是什么。我可以使用不带 src 属性的 img 标签，还是应该只使用 div 而不必担心 alt 标签或您在代码中看到的方式是否合适？

.social-links div{
display:inline-block;
  vertical-align:middle;
}
.icon-icon-facebook {
  background-image: url(../images/global/spritesheet.png);
  background-position: -111px -145px;
  width: 23px;
  height: 23px;
}
.icon-icon-google-plus {
  background-image: url(../images/global/spritesheet.png);
  background-position: -134px -145px;
  width: 23px;
  height: 23px;
}
.icon-icon-instagram {
  background-image: url(../images/global/spritesheet.png);
  background-position: -124px -111px;
  width: 23px;
  height: 23px;
}
.icon-icon-linkedin {
  background-image: url(../images/global/spritesheet.png);
  background-position: -147px -111px;
  width: 23px;
  height: 23px;
}
.icon-icon-pinterest {
  background-image: url(../images/global/spritesheet.png);
  background-position: -170px -111px;
  width: 23px;
  height: 23px;
}
.icon-icon-twitter {
  background-image: url(../images/global/spritesheet.png);
  background-position: -65px -145px;
  width: 23px;
  height: 23px;
}
.icon-icon-youtube {
  background-image: url(../images/global/spritesheet.png);
  background-position: -88px -145px;
  width: 23px;
  height: 23px;
}

          <div class="col-md-2">
            <ul class="social-links">
              <li><div role="img" class="icon-icon-facebook" title="facebook icon"></div>Facebook</li>
              <li><div role="img" class="icon-icon-twitter" title="twitter icon"></div>Twitter</li>
              <li><div role="img" class="icon-icon-pinterest" title="pinterest icon"></div>Pinterest</li>
              <li><div role="img" class="icon-icon-instagram" title="instagram icon"></div>Instagram</li>
              <li><div role="img" class="icon-icon-google-plus" title="google-plus icon"></div>Google Plus</li>
              <li><div role="img" class="icon-icon-linkedin" title="linkedin icon"></div>LinkedIn</li>
              <li><div role="img" class="icon-icon-youtube" title="youtube icon"></div>YouTube</li>
            </ul>
          </div>

Answer 1

我会在 :before 元素上使用它。由于图标后跟有文本，因此您不需要此处的角色属性。此外，该图标用于在 "design" 问题中支持文本，它不会向您的文档添加任何内容，因此您不必为其添加标题。

此外，"img" 角色在 HTML5 中无效。查看此处的文档以获取有关角色的更多信息：

http://www.w3.org/wiki/PF/XTech/HTML5/RoleAttribute

我会这样做：

HTML

     <div class="col-md-2">
        <ul class="social-links">
          <li class="facebook">Facebook</li>
          <...></...>
         </ul>
     </div>

CSS

 .social-link .facebook:before {
    background-image: url(../images/global/spritesheet.png);
    background-position: -111px -145px;
    content: '';
    display: inline-block;
    margin-right: 15px /* Set the desired margin here */;
    width: 23px;
    height: 23px;
 }

有关 :before 伪元素的更多信息，请查看此处： https://developer.mozilla.org/fr/docs/Web/CSS/%3Abefore

HTML5 使用 sprite-sheet 图像的有效方式

Valid way of using sprite-sheet images for HTML5

html

css

sprite-sheet