banner图的添加（z-index与overflow的共同作用）

banner中的素材图和banner盒子的大小不合时，有以下两种添加方式

1. 给图片限制宽度，让其等比缩放；
2. 使用定位（图片最好绝对定位）、overflow属性、z-index属性共同编辑；

我的盒子代码：

<div class="banner_1">
   <img src="../image/star.jpeg" alt="" class="t">
</div>
<div class="banner_2">
   <img src="../image/star.jpeg" alt="" class="b">
</div>

第一种盒子的css样式

.banner_2{
    position: relative;
    top: 60px;
    width: 100%;
}
.banner_2 img.b{
    position: absolute;
    width: 100%;
}

效果图：

缺点：图片高度过高了；

第二个盒子的css样式

.banner_1{
    position: relative;
    width: 100%;
    height: 500px;
    z-index: 1;
    overflow: hidden;
}
.banner_1 img.t{
    position: absolute;
    top:0;
    left: -30px;
    z-index: 0;
}

效果图：

个人认为的优点：

1. 可以设置图片的宽高；
2. 可以以以截取所需的特定图片；
3. 多余的范围不会影响整体页面的宽高；

第一个方法可以将图片完整的复刻出来，但是当图片的高度与banner盒子的大小不匹配，则会出现大量空白去；

第二个方法可以将过大的图片，

1. 按照所需的高度，使用定位将图片固定在所需的位置
2. 使用z-index,将banner盒子放在图片的上层；
3. 使用overflow属性将图片大于banner盒子的范围进行隐藏；