在使用剪切路径和溢出的父div上方显示div：隐藏

Question

我在有序列表上设置了一个滑块，每个li代表一张幻灯片。包含此列表的div使用clip-path和overflow：hidden整形为平行四边形。幻灯片的li元素内部相互嵌套着一个包含h1和h2标签的div。情况是，我尝试将这些标题的一部分放置在平行四边形的边界之外，从而产生溢出现象-这不起作用，因为剪切路径似乎覆盖/剪切了标题。我尝试了z-index和很多方法，但徒劳无功。您可以在这里看到问题：www.korkboden-mit-stil.de

任何想法/帮助都非常感谢。问候！

滑块html是：

<aside id="fh5co-hero">
            <div class="flexslider">
                <ul class="slides" style="background:rgba(232, 232, 232, 0.6);">
                <li style="background-image: url(images/site/slider/korkparkett_verlegen.jpg);">
                    <div class="overlay"></div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6 col-xs-8 col-md-offset-1 slider-text">
                                <div class="slider-text-inner">
                                    <h1><a href="contact.html">30 Jahre Korkparkett</a></h1>
                                        <h2>Hochwertiger Korkboden, solide Ideen, exzellent verlegt.</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li style="background-image: url(images/site/slider/korkbelag_kuechen.jpg);">
                    <div class="overlay"></div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6 col-xs-8 col-md-offset-1 slider-text">
                                <div class="slider-text-inner">
                                    <h1><a href="contact.html"">Think Out of the Box</a></h1>
                                        <h2 style="color:#000">Korkparkett lässt sich beinahe beliebig variieren. Muster, Farbe, Verlegeart, selbst extravagante Formen.</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li style="background-image: url(images/site/slider/fussbodenbelag_kork.jpg);">
                    <div class="overlay"></div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6 col-xs-8 col-md-offset-1 slider-text">
                                <div class="slider-text-inner">
                                    <h1><a href="contact.html"">Übrigens</a></h1>
                                        <h2>Kostenfreie Baustellenbesichtigung und Angebotserstellung garantiert.</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li style="background-image: url(images/site/slider/korkboden_varianten_sanierung.jpg);">
                    <div class="overlay"></div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6 col-xs-8 col-md-offset-1 slider-text">
                                <div class="slider-text-inner">
                                    <h1><a href="contact.html"">Besuchen Sie uns</h1>
                                        <h2 style="color:#000">Eine Vielzahl der neuen Muster 2020 sehen Sie jetzt in unserem Musterhaus.</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>       
                </ul>
            </div>
        </aside>

相应的CSS是：

#fh5co-hero .flexslider .slides {
position: relative;
overflow: hidden;
}

#fh5co-hero .flexslider .slides li {
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
min-height: 800px;
position: relative;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

#fh5co-hero .flexslider .slides .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#fh5co-hero .flexslider .slider-text {
opacity: 0;
min-height: 800px;
position: relative;
}
@media screen and (max-width: 768px) {
#fh5co-hero .flexslider .slider-text {
  min-height: 500px;
display:none;
}
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner {
position: absolute;
bottom: 0;
left: 0;
padding: 0 2em 3em 0;
margin-left: 0px;
}
@media screen and (max-width: 768px) {
#fh5co-hero .flexslider .slider-text > .slider-text-inner {
  text-align: right;
  margin-left: 100px;
}
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1, #fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
margin: 0;
padding: 0;
color: black;
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1 {
margin-bottom: 10px;
font-size: 60px;
line-height: 1.3;
font-weight: 300;
color: #fff;
display: inline;
display: inline;
background-color: #240C08;
box-shadow: 0.1em 0 0 #191919, -0.1em 0 0 #151515;
padding: 0.1em 0.3em;
box-decoration-break: clone;
}

#fh5co-hero .flexslider .slider-text > .slider-text-inner h1 a {
color: #fff;
}
@media screen and (max-width: 768px) {
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1 {
  font-size: 24px;
}
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
font-size: 22px;
line-height: 1.5;
margin-bottom: 10px;
margin-top: 10px;
color: rgba(255, 255, 255, 0.8);
font-family: "Open Sans", arial, sans-serif;
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 a {
color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

Answer 1

[如果不更改结构，我建议将背景图片放在标题之后，例如作为img或img中的span个元素或div，使它们填充整个父级li容器，并使其比z-index低于标题。

希望这会有所帮助:)节日快乐！

编辑：

请以以下笔为例：https://codepen.io/Nekto/pen/ZEYJwjx