qqjudith
2015-03-20 01:38
采纳率: 62.5%
浏览 6.6k
已采纳

HTML5背景图片显示大小怎么设置随窗口变化

设置背景图片时,图片不够大产生自动重复,怎么设置图片大小自动随显示窗口的大小而改变

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • 「已注销」 2015-03-20 02:48
    已采纳

    我也被这个问题困扰了很久,后来用background-size:cover;实现了

    已采纳该答案
    打赏 评论
  • danielinbiti 2015-03-20 02:10

    html5中可以在css样式中使用background-size属性

    打赏 评论
  • 「已注销」 2015-03-20 02:49

    我也被这个问题困扰了很久,后来用background-size:cover;实现了

    打赏 评论
  • 会飞的Pikachu 2015-03-20 03:09

    设置背景图像的元素需要有大小,才能显示背景图像。改变背景图像大小,可以改变元素大小这个角度入手。代码如下

     <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <style type="text/css">
            div{
                margin: 0 auto;
                padding: 0 0;
                height:200px;
                width: 200px;
                background-size: 100% 100%;
                background-image: url(q.jpg);
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div id="ele">
        </div>
        <script type="text/javascript">
            window.onresize=function()
            {
                var ele = document.getElementById('ele')
                ele.style.width=window.innerWidth / 5+"px";
                ele.style.height = window.innerHeight / 5+"px";     
            }
        </script>
    </body>
    </html>
    
    打赏 评论

相关推荐 更多相似问题