html - 将 PNG 图像放置在 div 轮播中

Question

经过几次搜索，我找不到我想做的事的例子。我有一个旋转木马，我的任务是像这样在旋转木马中放置一个 png 图像:

正如你所看到的，png 稍微超出了 div 的顶部

这是我已经尝试过的:https://codepen.io/MehdiX/pen/jOEaJox?editors=1100

但是这是行不通的，如您所见，当我制作负像素时，png 图像的边框不再可见。

我使用position:absolute；在我的 png 图像上，position:relative；在旋转木马 div 上，但它似乎不起作用。我不知道我是否应该对轮播的 div 或图像的 div(已经是相对的)采取行动

HTML :

<main id="home_part" class="row" role="main">

        <article>
            <div id="carousel_presentation" class="col-md-12">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://images.pexels.com/photos/204993/pexels-photo-204993.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="d-block w-100" alt="...">
                            <img src="https://retohercules.com/images/foto-png-online-8.png" class="women_png_sticky" alt="">
                        </div>
                        <div class="carousel-item">
                            <img src="..." class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="..." class="d-block w-100" alt="...">
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>

                <div class="col-md-12 text-center py-5">
                    <div class="container">
                        <h2 class="mb-3">Laissez-vous emporter par le bien-être !</h2>
                        <p class="lead">Échappez au stress du monde moderne et venez nous retrouver dans notre institut de soins. Vous y trouverez sérénité et bien-être dans un environnement calme et apaisant.</p>
                    </div>
                </div>
            </div>
        </article>

    </main>

#carousel_presentation {
    font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
    padding: 0;
    color: #565656;
    background-color: #FFF989;
  position:relative;
}

.women_png_sticky {
    margin-top:-600px;
}

#carousel_presentation h2 {
    font-size: 2rem;
    text-transform: uppercase;
}

@media only screen and (max-width: 780px) {
    #carousel_presentation h2 {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 560px) {
    #carousel_presentation h2 {
        font-size: 1rem;
        text-decoration: underline;
    }

    #carousel_presentation p {
        font-size: 1rem;
    }
}

我想知道是否存在一个简单的解决方案，例如 javascript 中的 Canvas 或 CSS，来管理这种类型的定位？

Answer 1

您在第 25 行的 carousel.scss 中有一个隐藏图像的 overflow: hidden 规则。

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  @include clearfix();
}

你可以做一个更具体的选择器来覆盖溢出:

div.carousel-inner { overflow: visible }

检查 codepen 中的分支:https://codepen.io/rafaelcastrocouto/pen/JjoOqXy?editors=1100