zoukankan      html  css  js  c++  java
  • 图片大小不改动,根据屏幕大小自动把图片居中显示

    background属性

    background-image: url('../img/1_1.jpg');   <!-- 背景图片路径 -->
    background-repeat: no-repeat;   <!-- 背景图片是否重复显示 -->
    background-position: center;   <!-- 若背景图片小于div,则居中显示 -->
    background-attachment: fixed;   <!-- 背景图片固定,不随scroll拖动而变动 -->

    居中显示

    父容器

    style="overflow-x:hidden"

    子容器

    position: absolute; left: 50%; top: 0%;     <!-- div向左移动屏幕宽度的50% -->
    margin-left: -960px; margin-top: 0px;    <!-- div向左移动自身宽度的50% -->

    子容器会居中显示,但右侧多余的东西要靠父容器的overflow-x:hidden隐藏。

    如果要上下也居中显示,则postion的top也要设置为50%,margin-top设置为图片的一半.

    html&css

    <body style="overflow-x:hidden">
    
        <!--
        background-attachment: fixed;
         -->
        <div style=" 1920px; height: 1420px;
         position: absolute; left: 50%; top: 0%;
         margin-left: -960px; margin-top: 0px;
         background-image: url('../img/1_1.jpg');
         background-repeat: no-repeat;
         background-position: center;">
        </div>
    </body>

    这样可以达到图片居中显示的效果。

  • 相关阅读:
    Struts2 xml表单验证
    struts2表单验证-整合国际化
    Strut2-Ajax总结
    java中的线性安全和不安全
    智游推送试用
    推送的重连策略
    Android本地通知的实现方式
    MyBatis框架学习二
    Java基础学习 2 (选择结构,循环结构)
    Java基础学习 1 (变量,数据类型,运算符)
  • 原文地址:https://www.cnblogs.com/aeolian/p/12124009.html
Copyright © 2011-2022 走看看