<img/> vs background-image

时间:2017-02-28 20:31:12

标签: css html5 image semantics

我在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;
}

1 个答案:

答案 0 :(得分:0)

  

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

SEO:是的,请查看https://support.google.com/webmasters/answer/114016?hl=enhttps://yoast.com/image-seo/

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

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