美文网首页
网页中图片的优先级和区别

网页中图片的优先级和区别

作者: 九天懒猫 | 来源:发表于2022-11-19 03:57 被阅读0次

    1-直接上img标签即可

    img标签是一个标签,不设置宽高默认会以原尺寸显示

    1-1没有宽高的图片显示的是图片本身的宽高,

    下图是代码和浏览器显示:


    1-2 给img添加了宽高后,调整后是改变的是图片的显示;

    下图是代码和浏览器显示:

    2-div标签+背景图片

    需要设置div的宽高,因为背景图片只是装饰的css样式,不能撑开div标签。

    下图是代码和浏览器显示:

    2-1 是有高宽的盒子显示

    2-2 是没有宽高的盒子

    下图是代码和浏览器显示:

    当没有宽高数据时,盒子就没有被撑开,所以没有显示。

    3-按照重要程度区别

    3-1理解img和background的本质不同

    img叫做 插入图;

    background又叫做 背景图;

    3-2 使用的方式

    img在工作用作比较重要的图片,比如:宣传图,首图,海报图,产品图必须是img;

    背景图片,修饰图,装饰性,美化用的图片;

    (仅为个人自学的一点点思考,如有错漏,欢迎留言指正)

    相关文章

      网友评论

          本文标题:网页中图片的优先级和区别

          本文链接:https://www.haomeiwen.com/subject/igsmxdtx.html