如何讓背景圖片全屏顯示


如下圖,這是一張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>

 

是不是感覺很有意思呢,哈哈哈哈哈~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM