• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

背景图片标签是什么_CSS学习

当前位置：网站建设 > 技术支持

背景图片标签是什么？

一 简单区分

背景图片会等到html结构加载完成才开始加载img标签是网页结构的一部分，会在html结构加载的时候加载

当加载失败时，背景图片在加载失败或路径找不到时，不会显示图片标记，img标签在加载失败或找不到路径时，会显示一个撕裂的小图标标记

二 何时用img，何时用背景图

1>使用img

作为html结构内容的一部分展示从后台传过来的数据对图片进行缩放操作利于搜索引擎搜索时

2>使用背景图

不是html结构的一部分图像代替文本使用时缩短下载时间时为不同的屏幕分辨率展示不同的图像时(media查询时使用背景图)

所谓数据图就是从后台获取的图片，一般就用img标签显示，其他的图片一般就作为背景图展示

三 img标签日常使用场景

图片缩放可以使用rem布局页面，给盒子定一个固定宽度，盒子下面的img标签给宽度100%（即给父盒子固定的rem宽度（宽跟图片宽一致），子级img标签宽度100%继承父级宽度即可）这样可以解决图片在页面放大缩小的时候 图片等比缩放，并且保证盒子之间的间距不变

注意给img标签如下使用，会出现盒子与盒子之间的间距被侵占或者间隔变大

img{ width: auto; height: auto; max-width: 100%; max-height: 100%; }

四 css背景图片的属性

背景类属性（css2的5个 css3 新增3个）

css 2

background-color：背景颜色background-image：url（“图片路径”）背景图片的路径background-repeat：no-repeat； 背景图片的平铺方式background-position：center center 背景图片的定位background-attachment：fixed 背景图片是否滚动fixed ：背景图片相对于窗体固定scroll ：背景图片相对于元素固定 ，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。复合：background：#000 url（） no-repeat center center fixed五个值，位置没有要求

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。