对标题图像使用css而不是html img标记的好处

时间:2014-10-08 作者:user3438958

我只想知道使用css{background image url();}是否有任何好处在设置标题时,在html中使用img标记。

我在wordpress多站点安装中使用Genesis框架,默认情况下,在admin>appearance>header中上载图像时,它将其设置为CSS{background image url();}

在我创建(并学习创建)自己的子主题时,我发现当用户自定义主题时,在html中使用img会更好,因为:

如果用户不想上传标题,则不会有空白。站点标题空间已准备好用于上载标题。

响应性-仅将img设置为最大宽度:100%;它的响应非常完美,始终显示完整图像,保持其比例,非常适合全宽标题。

用户可以在管理员界面中将页眉裁剪到他们想要的任何高度,它将显示精确的裁剪高度(只要宽度达到正确的建议大小)

我发现这段代码是用来设置的,我花了很长时间才找到,如果有人感兴趣,我想与大家分享:

remove_action( \'wp_head\', \'genesis_custom_header_style\' );
add_action( \'genesis_header\', \'am_main_header\' );
function am_main_header() {
?><div class="header-image"> <?php echo \' <a href="\'.home_url().\'">  <img 
src="\'.get_header_image().\'" alt="">   </a>\';  ?></div><?php
}
但我注意到,很多网站,如google+、youtube和我认为的twitter,当用户上传标题图像时,它会使用css{背景图像url();}对于标头(默认情况下与genesis相同)。所以我想知道这样做有什么好处?

上述代码看起来是否正确?对我来说很有用。

谢谢

1 个回复
最合适的回答,由SO网友:Mark Kaplun 整理而成

它与HTML语义相关,IMG是页面的重要语义元素,而背景图像没有语义重要性。因为IMG在语义上很重要,但可能无法加载或呈现,所以HTML标准requires 与图像一起提供的替代文本,即图像内容的描述,以便能够显示图像而不是图像。

目前的主流看法是,标题图像只是装饰,而不是内容的一部分,这就是为什么它们被用作CSS属性,而不是IMG标记。

从技术上讲,它不应该在代码中产生太大的差异,因为在开发工作方面

<div><img src="<?php >echo get_header_image()?"></div>
以及

<div style="backround:url(<?php >echo get_header_image()?>)"></div>
几乎为零。

如果您想涵盖所有可能性并将大多数选项留给用户,您可以让他们自己决定标题图像是装饰还是内容,可以给他们一个向图像添加描述性文本的选项,然后如果提供了,则使用IMG标记而不是css规则。一些搜索引擎优化专家可能会欣赏它,但它可能会飞越大多数人的头。

结束

相关推荐

当尝试向我的登录页面添加一个css文件时,会出现“Headers Always Sent”?

我看过的每一篇关于这个主题的教程都已经过时了,所以我希望这里的人能帮助我。我想为我的wp登录设置样式。带有CSS文件的php页面。但我想以一种在Wordpress更新时不会被覆盖的方式来做。据我所知,根据我读到的图茨,在我的主题函数中使用函数添加它的最佳方式。php文件。不幸的是,人们建议使用的代码并不适合我。这是我添加的代码。<?php function custom_login() { echo \'<link rel=\"stylesheet\" href=\"wplog