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

article/2025/10/30 5:57:32

关于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>

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