zoukankan      html  css  js  c++  java
  • HTML和CSS——背景图固定

    效果:

    对于不规则图片,在屏幕缩小时图片适当左移,但为了不遮挡左侧文字,左移至一定位置后图片固定位置。

    方法:

    给背景图片设置宽度和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; }

    js

    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');
        }
    })
  • 相关阅读:
    第二章函数对象
    2013/10/24初学BOOST
    [转]delete 多表删除的使用
    vs2010配置boost编程环境(照抄并简化)
    游戏服务器修改状态标志位方法
    小思 引用和指针
    第二章:UNIX标准化及实现
    const指针
    第一章:UNIX基础知识
    基础算法——位运算
  • 原文地址:https://www.cnblogs.com/cff2121/p/11251877.html
Copyright © 2011-2022 走看看