CSS非标准响应式图片框架

Question

我正在尝试为新闻部分的图片实现一个非标准框架。我的想法是让图片的 z-index 低于框架，并将框架放在它上面，并使它们响应。到目前为止我还没有运气。

<div class="mt-5 m-auto w-full">
    <!-- Swiper -->
    <div class="swiper news-swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide flex-col">
                <div class="news-gallery-image">
                    <img src="https://i.imgur.com/bRqr97Q.png" class="image" alt="forge your deck">
                    <img class="news-border" alt="borders"/>
                </div>
                <div class="w-auto mt-2">
                    <h1 class="text-1xl text-center">
                        HOTFIX #1.23 NOW LIVE!
                    </h1>
                </div>
            </div>
            <div class="swiper-slide flex-col">
                <div class="news-gallery-image">
                    <img src="https://i.imgur.com/bRqr97Q.png" class="image" alt="forge your deck">
                    <img class="news-border" alt="borders"/>
                </div>

                <div class="w-auto mt-2">
                    <h1 class="text-1xl text-center">
                        HOTFIX #1.23 NOW LIVE!
                    </h1>
                </div>
            </div>
            <div class="swiper-slide flex flex-col">
                <div class="news-gallery-image">
                    <img src="https://i.imgur.com/bRqr97Q.png" class="image" alt="forge your deck">
                    <img class="news-border" alt="borders"/>
                </div>
                <div class="w-auto mt-2">
                    <h1 class="text-1xl text-center">
                        HOTFIX #1.23 NOW LIVE!
                    </h1>
                </div>
            </div>
        </div>
    </div>
</div>

我有以下CSS。

.news-gallery-image {
    position: relative;
    height: 100%;
}

.news-gallery-image img {
    width: 100%;
    height: 100%;
}

.news-gallery-image .news-border {
    content: url("/resources/images/gallery-image-background-holder.png");
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

示例

您能帮忙一下吗^^.

Answer 1

看起来代码是正确的，但图像导致了问题。尝试使用上面的图片