两张等大的背景图叠加

最新推荐文章于 2021-05-31 14:00:49 发布

xxxux_onezero

最新推荐文章于 2021-05-31 14:00:49 发布

阅读量173

点赞数 1

分类专栏： JS&HTML&CSS

本文链接：https://blog.csdn.net/aaaayl/article/details/113005819

版权

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

3 篇文章 0 订阅

订阅专栏

<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>

实现效果：
在这里插入图片描述
这是最底下的图片index1:

index2：

通过使用伪元素，给底层的图片加了个图片蒙层，设置伪元素的透明度，而不会影响文字的显示。

xxxux_onezero

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两张等大的背景图叠加

<style> .wrapper { width: 200px; height: 150px; position: relative; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mask::before{
复制链接

扫一扫