实现图片背景的两种方式

实现图片背景的两种方式

1)通过css样式实现

<div class="box">
    <a class="logo_link" href="www.bilibili.com">
        <img class="header_logo" src="../static/images/bili_logo.png" alt="">
    </a>
</div>

* {
    padding: 0px;
    margin: 0px;
}
.box {
    width: 100%;
    height: 120px;
    background-image: url("../static/images/c60fe2b9198b5e5bff2a95984e6e4713d437850a.jpg");
    background-position: left top; /*定位取值[left top|left center|center top ...]*/
    background-size: 100% 120px; 
    background-repeat: no-repeat; /*no-repeat会使图片会铺满，但尺寸不合适时会伸缩*/
}
.logo_link .header_logo {
    height: 60px;
    width: auto;
}

2)通过img实现

结合position和z-index属性实现img元素变成背景图片

<div class="box">
    <img class="banner_bg" src="../static/images/c60fe2b9198b5e5bff2a95984e6e4713d437850a.jpg" alt="">
    <a class="logo_link" href="www.bilibili.com">
        <img class="header_logo" src="../static/images/bili_logo.png" alt="">
    </a>
</div>

* {
    padding: 0px;
    margin: 0px;
}
.box {
    width: 100%;
    height: 120px;
    position: relative;
}
.banner_bg {
    width: 100%;
    height: 120px;
    position: absolute;
    left: 0px;
    right: 0px;
    z-index: -1;
}
.logo_link .header_logo {
    height: 60px;
    width: auto;
}

总结

第二种方式相较于第一种方式更为灵活，如果背景图片存在更换需求，则采用第二种方式比较适合，通过js修改html中的url来实现图片的更换。