zoukankan      html  css  js  c++  java
  • 网页布局什么时候用图片背景,什么时候用img标签?

    网页布局什么时候用图片背景,什么时候用img标签?

    回答一:应该用 img 标签,除了可以设 alt 和被引擎抓取外,在 CSS 裸奔时也可以显示。

    回答二:建议看看 SO 上面的这个问题的讨论:html - When to use IMG vs. CSS background-image?
    先抛开实际操作中的问题,准则其实很简单,如果一张图片是网页内容的一部分,就该用 <img>,否则就建议用 CSS 背景图。但问题的核心在于「Logo 是否属于网页内容的一部分」。

    从语义正确性角度个人倾向于用 <img>。

    回答三:1.文件管理起来方便一些。一般情况下JS/CSS/IMAGE都放在同一个静态目录下,CSS可以直接使用相对地址。当然,有的公司是使用的独立域名存放图片文件,这种情况下这种优势不明显;2.CSS裸奔的时候也可以显示。text-indent:-9999px;3.对于retina屏幕,可以使用CSS直接适配不同图片;

    回答四:

    评论里已经有人说到了,如果要对SEO比较好的,就是 @Sven 说的 A标签+CSS定义背景图。知乎的logo用的就是这种方式,这种方式比IMG好就在于是个很好的锚文本链接,而且A标签也可以添加title属性,而 IMG没有锚文本,只有title属性和alt文本。目前来说,搜索引擎对文本信息的识别要比alt中的文字友好的多。
    注:此方法虽然有涉嫌隐藏内容的作弊嫌疑,但是因为现在有不少网页设计人员都这么用,同时也并没有影响到用户体验,所以只要不是恶意堆砌关键字的话,我认为是没有问题的。

    回答五:

    按需求来说,比如 dribbble.com
    左上角的logo同时使用 img 和 background
    img 版的logo是纯粹作为logo般的存在,是不受网站设计风格影响的存在,在禁用css的时候,依然作为“内容”显示,仅扮演“内容”的角色。
    而background中的logo是因网站视觉需求而优化过的,算是“表现”的范畴了。
    细节虽小,却把“内容”和“表现”分离思想演绎到极致

    上其关键代码

    <style>
    a {
      background: url(background-logo.png);
    }
    a img {
      height: 0;
    }
    </style>
    
    <a>
      <img src="img-logo.png" alt="logo-name">
    </a>
    


    这里分析一下知乎左上角的logo
    用的是backgound,标签内再加文字回退,没css的时候显示“知乎”这2个字,是文字,文字不是logo,很明显,logo应该是内容的一部分,但如果把这图换成img标签,那没css的时候,就变成一片白了(因为这图的logo是白色)。

    所以如果你的logo不需要为网站的视觉需求而另外改变,那就直接img (别忘了alt替代文字),否则可以尝试下dribbble的方法。

  • 相关阅读:
    Java 跨系统开发隐患(一)
    SpringBoot邮件推送功能
    基于图灵api的Python机器人
    JSP编码问题解决方法
    记一次数据结构课设
    基于百度语音识别API的Python语音识别小程序
    帝国cms过滤采集内容
    如何批量取消文章审核
    评论时判断会员是否登录
    帝国cms把文章加入到收藏夹代码
  • 原文地址:https://www.cnblogs.com/snowinmay/p/3049113.html
Copyright © 2011-2022 走看看