当前位置:Web前端 > > 正文

html5怎么修改背景颜色(HTML5 body设置全屏背景图片的示例代码)

时间:2021-10-23 10:52:28类别:Web前端

html5怎么修改背景颜色

HTML5 body设置全屏背景图片的示例代码

用什么代码实现?不允许有白色底色产生,因为手机高度不一样

设计图要标准(750)确认是背景图(通屏底图)应用场景:移动端宣传页面或者活动页面

错误的写法:加到li中结合图片设置min-height,但是页面不会回弹

终极方案

  • html,body{
    	width:100%;
    	height:100%
    }
    
  • body{
      font-family: "华文细黑";
      background:url("../img/Flyer-bg.png") no-repeat;
      background-size: 100%;
    }
    
  • 一个hack方案解决垂直剧中问题

  • <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0">
        <title>缓存</title>
        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="js/store.min.js"></script>
        <style>
            .parent{
                width:200px;
                height: 200px;
                /* 以下属性垂直居中 */
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                background-color: #aaa;
            }
        </style>
    </head>
    <body>
        <li class="parent">111</li>
    </body>
    
  • 其他方案

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <li id="Layer1" style="position:fixed; left:0px; top:0px; width:100%; height:100%">  
        <img src="https://www.qianbuxian.com/uploads/banners/20171214085954_shouye5.jpg" width="100%" height="100%"/>  
    </body>
    </html>
    
  • 清除浮动

  • .float-left {
        float: left;
    }
    .float-right {
        float: right;
    }
    .clear-fix:after {
        display: table;
        content: '';
        clear: both;
    }
    
  • 到此这篇关于HTML5 body设置全屏背景图片的示例代码的文章就介绍到这了,更多相关html5 body背景图片自适应屏内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!

    上一篇下一篇

    猜您喜欢

    热门推荐