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

Posted 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图的拼法的主要内容,如果未能解决你的问题,请参考以下文章

绝对定位和负边距的应用

裁剪带负边距的图像

边距的小知识点;

负边距与相对定位

奇怪的 Firefox 负边距

探究负边距(negative margin)原理