两张等大的背景图叠加

最新推荐文章于 2021-08-03 21:32:42 发布

原创最新推荐文章于 2021-08-03 21:32:42 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

JS&HTML&CSS 专栏收录该内容

3 篇文章

订阅专栏

<style>
    .wrapper {
        width: 200px;
        height: 150px;
        position: relative;
    }
    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .mask::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("../images/index2.jpeg");
        background-position: center;
        background-size: 100% 100%;
        opacity: 0.8;
    }
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        z-index: 1;
    }
    img {
        width: 100%;
        height: 100%;
    }
    .name {
        font-size: 16px;
        color: white;
    }
</style>
<body>
    <div class="wrapper">
        <img src="../images/index1.jpeg" alt="">
        <div class="mask">
            <div class="content mask">
                <div class="name">onezero</div>
                <div class="name">onezero</div>
                <div class="name">onezero</div>
            </div>
        </div>
    </div>
</body>