网页背景图片不重复的铺满屏幕（HTML/JSP）

来源：互联网发布：数据库建模是什么意思编辑：程序博客网时间：2024/05/16 08:07

陈三岁的前端之路–HTML（一）

写在前面：陈三岁开始学前端啦，前端东西杂又杂，语言也不像C/C++一样成熟，多样化和版本更迭常常使初学者感到困扰，三岁踩的很多坑有很多我以前也踩过，借此机会记录下来，见证我们在前端领域一起成长的点滴

方法一：

背景图片宽高拉伸至与浏览器页面一致

<!DOCTYPE HTML><html lang="en"><head>    <meta charset="UTF-8">    <title>三岁的HTML</title>    <style type="text/css">        #img {          z-index:-1;  /*使背景图片置底显示*/        position:absolute;/*将背景图片设置成 absolute（绝对定位），使其显示于文档流之下，不占有文档流空间*/          width:100%;          height:100%;  }      </style></head><body scroll = no>  <!-- 图片不随滚动条滚动 -->    <img alt = "图片无法加载" src="pic.jpg" id="img">    <p><abbr title = "World Health Organization" style = "color:white">WHO</abbr> 成立于 1948 年。</p></body></html>

方法二：

背景图片按比例缩放，平铺浏览器页面

缩放比例为图片宽度：浏览器宽度

<!DOCTYPE HTML><html lang="en"><head>    <meta charset="UTF-8">    <title>三岁的HTML</title>    <style type="text/css">        body{              background-image: url(pic.jpg);              background-size:cover;         }     </style></head><body scroll = no>  <!-- 图片不随滚动条滚动 -->    <img alt = "图片无法加载" src="pic.jpg" id="img">    <p><abbr title = "World Health Organization" style = "color:white">WHO</abbr> 成立于 1948 年。</p></body></html>

两种方法的对比

方法一：若图片宽高比与浏览器不一致，会因强行拉伸导致图片形变

方法二：按比例缩放，图片完美显示

阅读全文

1 0