如何让背景图片全屏显示

最新推荐文章于 2020-05-12 10:53:54 发布

weixin_30731287

最新推荐文章于 2020-05-12 10:53:54 发布

阅读量519

点赞数

原文链接：http://www.cnblogs.com/futai/p/5076317.html

版权

如下图，这是一张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>

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

转载于:https://www.cnblogs.com/futai/p/5076317.html

weixin_30731287

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
如何让背景图片全屏显示

如下图，这是一张1920*900的图片把它设为背景图片后，咦，怎么这样了呢？如何实现全屏显示呢，下面是实现方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景图片全屏</titl...
复制链接

扫一扫