900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 背景图片标签是什么 – CSS – 前端 html css段间距

背景图片标签是什么 – CSS – 前端 html css段间距

时间:2019-08-02 01:01:55

相关推荐

背景图片标签是什么 – CSS – 前端 html 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五个值,位置没有要求

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。