我只想知道使用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相同)。所以我想知道这样做有什么好处?
上述代码看起来是否正确?对我来说很有用。
谢谢
最合适的回答,由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规则。一些搜索引擎优化专家可能会欣赏它,但它可能会飞越大多数人的头。