HTML和CSS——背景圖固定

本文轉載自查看原文 2019-10-11 17:39 571 web/ HTML

效果：

對於不規則圖片，在屏幕縮小時圖片適當左移，但為了不遮擋左側文字，左移至一定位置后圖片固定位置。

方法：

給背景圖片設置寬度和absolute定位，使得圖片浮於頁面。然后在js里邊判斷當前窗口大小，當頁面小到會致使圖片遮擋左側文字時，給圖片添加left屬性，這樣圖片就不會再向左移動了（如果文字在右側就添加right屬性）。

html

<body>
    <img class="backImg" src="img/backimg.png">
    <div id="container">
    </div>
</body>

css

body {
    margin: 0px;
    min-width: 1920px;
    min-height: 800px;
    overflow: hidden;
}

.backImg {
    width: 1530px;
    position: absolute;
    right: 0;
    top: 0;
}

#container {
    position: fixed;
　　 bottom: 250px; 
　　 width: 383px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 131px;
}

window.onload=function(){
    if($(window).width()<=1660){
        $('.backImg').attr('style','left:150px;');
    }
}
$(window).resize(function(){
    if($(window).width()<=1660){
        $('.backImg').attr('style','left:150px;');
    }
    else{
        $('.backImg').removeAttr('style');
    }
})

免責聲明！

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

猜您在找 html的css背景圖的repeat html背景圖 css固定背景圖位置實現屏幕滾動時顯示背景圖不同區域 html+css-->background-img(背景圖的設置） css 一張背景圖鋪滿整個頁面 html css背景圖與html插入img的區別 css背景圖與html插入img的區別 CSS背景顏色、背景圖片、平鋪、定位、固定 CSS背景顏色、背景圖片、平鋪、定位、固定 css3 背景圖動畫一