<img/> vs background-image

Question

我在stackoverflow上找到this，我对此有疑问。我可以在CodePen上使用此代码来满足SEO并设计页面的一部分吗？

<figure>
 <img src="https://placehold.it/350x150" alt="something important">
 <figcaption>
   something important
 </figcaption>
</figure>

*{
  font-family: helvetica;
}
figure {
 margin: 100px auto;
 position: relative;
 width: 500px;
 height: 100px;
 background-image: url(https://placehold.it/650x150);
 background-size: cover;
 background-position: center center;
}

img{
 display: none;
 }
figcaption{
  position: absolute;
 bottom: 0;
 width: 100%;
 background: maroon;
 color: WhiteSmoke;
 text-align: center;
 font:small-caption;
 font-style: italic;
}

Answer 1

  

我在stackoverflow上找到了这个，我对此有疑问。我可以在CodePen上使用此代码来满足SEO并设计页面的一部分吗？

SEO：是的，请查看https://support.google.com/webmasters/answer/114016?hl=en和https://yoast.com/image-seo/。

只要您提供的内容适合您的内容并提供更好的用户体验，您就会变得更好。确保您提供有价值的alt属性文本，不要试图滥用系统。

设计：看起来语义正确，我喜欢外观，虽然外观更主观。