Question

为什么有些网站会使用background-image: url('') CSS规则作为固定标题中的徽标而不是<img>标记？

我正在浏览音乐网站的代码：Shazam和Deezer并意识到让我感到惊讶的一些事情，但这也令我担心...

示例1 :(这是Shazam网站的代码）

<a class="header-logo" href="https://www.shazam.com/" data-shz-beacon="providerdesc=home-logo" style="background-image: url(&quot;/resources/a935eea48a74b098f4b697dccd8c5322e30f48cc/logos/logo.png&quot;);"></a>

^在这种情况下，他们添加了<a>标记，然后使用background-image: url(''）CSS规则添加了内联样式，而不是添加<img>标记。

示例2 :(这是来自Deezer网站的代码）

HTML 的

<h1>
<span class="index-header-logo logo logo-deezer-hp"></span>
<span class="sr-only" lang="en">Deezer</span>
</h1>

CSS

.logo-deezer-hp {
background-image: url(/cache/images/common/logos/deezer_hp.51c8087603572ee440e73719f69ff50d.png);
height: 40px;
width: 185px;}

^在这种情况下，他们在<span>标记内添加了<h1>标记，为第一个span标记提供了一个类，然后通过CSS添加了background-image: url('') CSS规则。

所以我问自己：

1-为什么Shazam和Deezer没有使用<img>标签添加他们的徽标？ 2-为什么Shazam不使用<img>标记内的<a>标记？ 3-为什么Deezer使用<h1>和<span>标签添加徽标？

我对此进行了很多研究，但仍然无法理解为什么他们没有使用<img>标签作为他们的徽标......

我的问题是......

“我使用<img>标记将我的徽标放入我网站的固定标题中，为什么Shazam和Deezer不使用该标记？他/为什么决定使用background-image: url('') CSS相反呢？

其他每个网站都使用<img>标记，为什么不使用？！？！

我真的需要知道为什么这两个网站都认为最好使用background-image: url('') ......

Answer 1

据我所知，在shazams的网站上，他们使用标签为他们的徽标添加了一个链接，当您点击徽标时，它会将您重定向到他们的主页，有些网站使用徽标和单独的主页按钮网站对我来说，我可以看到他们使用标签作为按钮，而不是文字，他们使用图像或简单的徽标，以获得更有效的用户体验。

关于Deezer，他们使用标签同时拥有两者，我说在创建/设计自己的网站时，它都是关于创造力的，并且你可以自由地使用HTML的每个元素。

结论，对我来说，我使用标签来获得响应迅速的图像/徽标显示（特别是在工作引导组件中），而在“背景图像”中使用它，将它更容易实现到其他元素在你的网站上，假设你将它放在一个类中，只要你想显示你使用过的图像，就把它放到一个元素中。

<img/>与background-image：固定标题中的url（''）（解释）

1 个答案: