Print

html5背景全屏不重复

问：如何把HTML文件的背景图片设成全屏?
  1. 答：步骤一、首先打开需要修改的HTML文件。
    步骤二、然后始化样式，将代码添加在<style></style>标签内。
    步骤三、添加一个div容器，然后命名为bg-box
    步骤四、背景全屏需要容器全屏，将bg-box的样式补全。
    步骤五、设置完毕，图片背景以及全屏了。
问：html5怎么设置整页背景图片
  1. 答：html5加背景图片可以通过：
    1.首先可以去写一个div，然后这个div当然宽高是一定要有，然后在div中去设置要的背景图片，是否重复等属性，repaet这个来设置，no-repeat(是不重复)、repeat-x（沿着x轴重复）、repeat-y（沿着Y轴重复）这里我提交一段代码：
    <div id = 'test'></div>
    <style>
    #test{
    width：300px;
    height:400px;
    background:url('图片的地址')no-repeat;
    }
    </style>
    这样背景图片就设置好了！
问：html里面怎样让背景图片全屏,使用width和height来定义吗,,
  1. 答：如果这张图片为背景图片由于背景图片不具有伸缩性，只能通过别的方法绕着解决，在ie中可以用<body 
    style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">，实现背景拉伸铺满整个浏览器，但其它的浏览器不支持。
    这时可以拐个弯，设置两层div，底层div当做背景使用，放置一张图片即可。
    <div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/></div>
    网页背景图片默认情况下是重复平铺满整个页面。上面1方法是要求图片不重复，但又得占满浏览器所采用的方法。
  2. 答：在html中设置<body>的背景图片,将背景图片的长度和宽度的值均设为100%就可以实现全屏显示.

本文来源: https://www.lw81.cn/article/2fcecd3f8e4ff3ef5b5fa05c.html