做一个常规的banner图——负边距的使用banner图的拼法

Posted 2020-09-05 Cherish李

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了做一个常规的banner图——负边距的使用banner图的拼法相关的知识，希望对你有一定的参考价值。

在这之前，首先要了解如何设置块级元素在块级元素水平居中

方法：

设置子容器为定位元素

水平居中

left：50%；margin-left：-width/2；

垂直居中

top：50%；margin-top：-width/2；

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            .div1{
                width: 200px;
                height: 200px;
                /*background-image: url(img/002.png);*/
                background-color: green;
            
                border:10px dotted red;
                
                background-clip: padding-box;
                position: relative;
                overflow: hidden;
                    
            }
            .div2{
                width: 100px;
                height: 100px;
                background-color: palevioletred;
                position: absolute;
                left: 50%;
                margin-left: -50px;
                top: 50%;
                margin-top: -50px;
            }
            
        </style>
    </head>
    <body>
        <!---->
        <div class="div1">
            <div class="div2"></div>
        </div>
    </body>
</html>

效果图：

掌握了上边的方法，我们就可以做个比较标准的banner图了。

下边是一个没有被切的banner 图的做法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #zb_banner{
    width: 100%;
    height:345px;
    position: relative;
    /*background-position: -260px 0px;*/
    overflow: hidden;
}
#zb_banner .c_ban{
    width: 1920px;
    height: 345px;
    background-image: url(../img/a01d20c11e264df890bd3e629e2420b0.jpg);
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    margin-left: -960px;
    
}
        
        </style>
    </head>
    <body>
        <section id="zb_banner">
            <div class="c_ban">
            </div>
        </section>
    </body>
</html>

效果图如下：

最大化下的状态：

缩小窗口后的效果：

因为现在主流最大的显示屏是1920的，所以banner图一般也做成1920的，被切开的话，放到一个宽度1920的div里边就可以了，不用调整图的大小。只有这么设置才会不会因为浏览器窗口大小的变化而影响banner图的居中位置，也可以使被切开的banner图能够完整的拼起来，不会变形。

以上是关于做一个常规的banner图——负边距的使用banner图的拼法的主要内容，如果未能解决你的问题，请参考以下文章

探究负边距（negative margin）原理