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 css固定背景图位置实现屏幕滚动时显示背景图不同区域 html+css-->background-img(背景图的设置） CSS背景颜色、背景图片、平铺、定位、固定 css3 背景图动画一 css实现背景图横向滚动 css背景图撑开盒子高度 css设置背景图（背景图太大导致图片显示不全） css--让背景图有动起来的感觉？？？？ css背景图有边框background: url