HTML网页图片背景以及图片自适应设置

最新推荐文章于 2024-05-11 21:24:37 发布

不凉-7WIO

最新推荐文章于 2024-05-11 21:24:37 发布

阅读量1.1w

点赞数 33

分类专栏：个人学习笔记文章标签： html

本文链接：https://blog.csdn.net/m0_56146871/article/details/115711136

版权

个人学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于HTML网页图片背景以及图片自适应设置

Test 1

背景图片需要用到标签中的background属性
图片背景需要显示的位置是网页的身体部分即在body中显示，因此background属性应该放在body标签内
本次使用图片的大小为4808*2704像素，这是图片原来的样子

使用图片展示
这是代码部分

<body background="img\maple leaf.jpg">        <!--未设置图片大小-->
</body>

这是仅设置了背景图片的效果，因为图片在浏览器里默认都是从屏幕的左上角开始展示，如果图片太大会显示不全，效果就像下面这样

这是未设置图片大小的背景图片
以上图片展示并不是我们想要的效果，因此我们需要设置图片的大小，让图片自适应屏幕大小，以下是代码部分

<body backround="img\maple leaf.jpg"         <!--图片背景链接图片的相对路径-->
style=" background-repeat:no-repeat ;       <!--设置背景图片是否重复：背景不重复-->
background-size:100% 100%;                     <!--设置背景图片尺寸宽度以及高度-->
background-attachment: fixed;">                <!--背景附件设置为固定-->
</body>

对于图片附件设置为固定，我理解的是网页默认背景就是白色，我们要添加背景图片就是要更改默认值，而图片就是一个更改背景所需要的一个附件
以下是设置了背景图片自适应的效果
这是设置了背景大小的样子
背景图片自适应效果是从这一篇博客里学到的，帖子的链接给挂上，不然等哪天收藏多了找不到，嘿嘿
无恶不作的黑猫警长

不凉-7WIO

关注

33
点赞
踩
146

收藏

觉得还不错? 一键收藏
2
评论
HTML网页图片背景以及图片自适应设置

关于HTML网页图片背景以及图片自适应设置Test 1背景图片需要用到标签中的background属性图片背景需要显示的位置是网页的身体部分即在body中显示，因此background属性应该放在body标签内本次使用图片的大小为4808*2704像素，这是图片原来的样子这是代码部分<body background="img\maple leaf.jpg"> </body>这是仅设置了背景图片的效果，因为图片
复制链接

扫一扫