如何让背景图片全屏显示

如下图，这是一张1920*900的图片

 

把它设为背景图片后，咦，怎么这样了呢？

 

如何实现全屏显示呢，下面是实现方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片全屏</title>
</head>
<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }
    .container {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 2px;
        z-index: -999;
    }
    img {
        width: 100%;
        height: 100%;
  }
</style>
<body>
    <div class="container"><img src="bg.jpg" alt=""></div>    
</body>
</html>

 

如果图片是竖向，却又想全屏显示某一部分呢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片全屏</title>
</head>
<style type="text/css">
    body {
        margin: 0;
        padding: 0;
        background: url('bg2.jpg');
        background-size: cover;
        background-position: 100% 30%;
    }
</style>
<body>
</body>
</html>

 

是不是感觉很有意思呢，哈哈哈哈哈~

 

posted @ 2015-12-25 16:31  付太  阅读(3555)  评论(1)    收藏  举报