资讯专栏INFORMATION COLUMN

该如何选择 background-image 和 img 标签

QLQ / 2020人阅读

摘要:用标签如果你希望别人打印页面时候包含这张图片请使用标签当这张图片有非常有意义的语义,比如警告图标,请使用标签及它的属性。这样意味着你可以向所有的用户终端现实他的意义。

用img标签

如果你希望别人打印页面时候包含这张图片请使用 img 标签

当这张图片有非常有意义的语义,比如警告图标,请使用img标签及它的alt属性。这样意味着你可以向所有的用户终端现实他的意义。

IE6下 背景图片不能益出父级元素 要使用img multiple overlay images in IE6.

如果你使用动画img动画要比background-image 表现更好improve performance of animations over a background

什么时候用 CSS background-image

如果图片不是内容的一部分使用 background-image

如果使用图片替换文字请使用 background-image

如果你不希望别人打印页面时候包含这张图片请使用 background-image

如果你想改善加载时间 使用 CSS sprites

如果你只想用一张图片的一部分 请使用 CSS sprites

用background-image 以及 background-size:cover 拉伸填充整个窗口

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110938.html

相关文章

  • 如何选择 background-image img 标签

    摘要:用标签如果你希望别人打印页面时候包含这张图片请使用标签当这张图片有非常有意义的语义,比如警告图标,请使用标签及它的属性。这样意味着你可以向所有的用户终端现实他的意义。 用img标签 如果你希望别人打印页面时候包含这张图片请使用 img 标签 当这张图片有非常有意义的语义,比如警告图标,请使用img标签及它的alt属性。这样意味着你可以向所有的用户终端现实他的意义。 IE6下 背景图...

    Jackwoo 评论0 收藏0
  • Web图片资源的加载与渲染时机

    摘要:此文研究页面中的图片资源的加载和渲染时机,使得我们能更好的管理图片资源,避免不必要的流量和提高用户体验。原理不存在的元素不会产出到树上,构建渲染树过程中遍历树时无法遍历不存在的元素,因此不会加载图片,也不会产出到渲染树上。 此文研究页面中的图片资源的加载和渲染时机,使得我们能更好的管理图片资源,避免不必要的流量和提高用户体验。 浏览器的工作流程 要研究图片资源的加载和渲染,我们先要了解...

    BLUE 评论0 收藏0
  • Web图片资源的加载与渲染时机

    摘要:此文研究页面中的图片资源的加载和渲染时机,使得我们能更好的管理图片资源,避免不必要的流量和提高用户体验。原理不存在的元素不会产出到树上,构建渲染树过程中遍历树时无法遍历不存在的元素,因此不会加载图片,也不会产出到渲染树上。 此文研究页面中的图片资源的加载和渲染时机,使得我们能更好的管理图片资源,避免不必要的流量和提高用户体验。 浏览器的工作流程 要研究图片资源的加载和渲染,我们先要了解...

    waruqi 评论0 收藏0
  • 总结常用伪类与伪元素

    摘要:总结常用伪类与伪元素伪类和伪元素是为了格式化树以外的信息而被引入的。伪类一个伪类是以一个冒号作为前缀,被添加到一个选择器末尾的关键字,可以让指定的元素在特定的状态呈现指定的样式。 总结常用伪类与伪元素 伪类和伪元素是为了格式化 DOM 树以外的信息而被引入的。 伪类 一个 CSS 伪类是以一个冒号(:)作为前缀,被添加到一个选择器末尾的关键字,可以让指定的元素在特定的状态呈现指定的样式...

    anRui 评论0 收藏0
  • 译文-浏览器下载图片的方式时间点

    摘要:接下来看看浏览器是怎么处理预测浏览器行为浏览器下载图片应该独立于的构建。那么相应的浏览器就会下载不可见的。因为如果浏览器在构建前开始下载,它是没有办法知道这张图片是不是需要展示在页面上。 原文链接:https://csswizardry.com/2018/... 背景资料 为了更好地控制产品主页缩略图的显示,(作者)团队选择了css的background-image而不是标签上能解决这...

    miguel.jiang 评论0 收藏0

发表评论

0条评论

QLQ

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<