Ich habe verschwommen Text, wenn Bootstrap 4 Karussell auf meiner Website verwenden

Question

Ich entwickle eine Website, wo ich ein Bootstrap-Karussell und verschiedene Texte über dieses Karussell (absolutes Element) setzen müssen.

Sobald ich das Karussell auf der Website, alle Texte werden verschwommen und schwer zu lesen.

Ich habe gelesen, könnte ein Problem zwischen Z-Index des Textes und Z-Index des Karussells, aber ich bekomme nicht, wie ich es lösen kann, weil ich diesen Text über das Karussell halten muss.

Hier wird das Bild von dem, was ich entwickle:

Hier mein Code:

HTML

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 top-header-container"> 
      <ul> 
       <li>UK 33333</li> 
       <li>IRELAND 333333</li> 
       <li>CANADA 333333</li> 
      </ul> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 background-img-slide" style="z-index: -10px;"> 

      <div id="demo" class="carousel slide" data-ride="carousel"> 

       <!-- Indicators --> 
       <ul class="carousel-indicators"> 
        <li data-target="#demo" data-slide-to="0" class="active"></li> 
        <li data-target="#demo" data-slide-to="1"></li> 
        <li data-target="#demo" data-slide-to="2"></li> 
       </ul> 

       <!-- The slideshow --> 
       <div class="carousel-inner"> 
        <div class="carousel-item active"> 
         <img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800"> 
        </div> 
        <div class="carousel-item"> 
         <img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800"> 
        </div> 
        <div class="carousel-item"> 
         <img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800"> 
        </div> 
       </div> 

       <!-- Left and right controls --> 
       <a class="carousel-control-prev" href="#demo" data-slide="prev"> 
        <span class="carousel-control-prev-icon"></span> 
       </a> 
       <a class="carousel-control-next" href="#demo" data-slide="next"> 
        <span class="carousel-control-next-icon"></span> 
       </a> 
      </div> 

     </div> 
    </div> 
    <div class="logo-wrap"> 
     <div class="logo-container"> 
      <a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>"><img class="logo-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/deane-logo.png"></a> 
     </div> 
    </div> 
    <nav class="main_menu_container"> 
     <ul class="main_menu_class"> 
      <li><a href="#">About us</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Projects</a></li> 
      <li><a href="#">Policies</a></li> 
      <li><a href="#">Contact us</a></li> 
     </ul> 
    </nav> 
    <div class="slide-title-blue-wrap"> 
     <div class="slide-title-blue-container"> 
      <span class="slide-title-blue">tefdjsafkljdasfkljkjfdlskalòs</span> 
     </div> 
    </div> 
    <div class="slide-title-red-wrap"> 
     <div class="slide-title-red-container"> 
      <span class="slide-title-red">tefdjsafkljdasfkljkjfdlskalòs</span> 
     </div> 
    </div> 
    <div class="slide-title-green-wrap"> 
     <div class="slide-title-green-container"> 
      <span class="slide-title">tefdjsafkljdasfkljkjfdlskalòs</span> 
     </div> 
    </div> 
</div> 

CSS

.top-header-container { 
    text-align: right; 
    position: relative; 
    z-index: 2; 
} 

.top-header-container > ul { 
    margin: 0; 
    padding: 0; 
} 

.top-header-container > ul > li { 
    display: inline-block; 
    list-style: none; 
    padding: 15px; 
    font-size: 13px; 
} 

.main_menu_container { 
    text-align: right; 
    position: absolute; 
    width: 58%; 
    right: -110px; 
    top: 55px; 
} 

.main_menu_container > ul { 
    margin: 0; 
    padding: 0; 
    padding-right: 150px; 
    background: #76bd21; 
    transform: skewX(-45deg); 
    -ms-transform: skewX(-45deg); 
    -webkit-transform: skewX(-45deg); 
} 

.main_menu_container > ul > li { 
    display: inline-block; 
    list-style: none; 
    padding: 15px; 
    transform: skewX(45deg); 
    -ms-transform: skewX(45deg); 
    -webkit-transform: skewX(45deg); 
} 

.main_menu_container > ul > li > a { 
    color: #fff; 
    text-transform: uppercase; 
    text-decoration: none; 
} 

.main_menu_container > ul > li > a:hover { 
    text-decoration: none; 
} 

.logo-wrap { 
    position: relative; 
    margin-top: -835px; 
    margin-left: -35px; 
} 

.logo-container { 
    position: absolute; 
    left: -450px; 
    background: rgba(255, 255, 255, 0.82); 
    height: 800px; 
    width: 50%; 
    transform: skewX(-45deg); 
    -ms-transform: skewX(-45deg); 
    -webkit-transform: skewX(-45deg); 
} 

.navbar-brand { 
    transform: skewX(45deg); 
    -ms-transform: skewX(45deg); 
    -webkit-transform: skewX(45deg); 
} 

.logo-img { 
    position: absolute; 
    left: 110px; 
    top: 40px; 
} 


.background-img-slide { 
    position: relative; 
    margin-top: -100px; 
    background-image: url(assets/img/image-home-main.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
    height: 850px; 
} 

.slide-title-blue-wrap { 
    position: relative; 
} 

.slide-title-blue-container { 
    position: absolute; 
    left: -689px; 
    top: -7px; 
    background: rgba(5, 34, 162, 0.85); 
    height: 700px; 
    width: 60%; 
    transform: skewX(45deg); 
    -ms-transform: skewX(45deg); 
    -webkit-transform: skewX(45deg); 
    z-index: 15; 
} 

.slide-title-blue { 
    position: absolute; 
    top: 70%; 
    left: 65%; 
    transform: skewX(-45deg); 
    -ms-transform: skewX(-45deg); 
    -webkit-transform: skewX(-45deg); 
    color: #fff; 
} 

.slide-title-green-wrap { 
    position: relative; 
} 

.slide-title-green-container { 
    position: absolute; 
    left: -881px; 
    top: 835px; 
    background: rgba(118, 189, 33, 0.85); 
    height: 800px; 
    width: 60%; 
    transform: skewX(-45deg); 
    -ms-transform: skewX(-45deg); 
    -webkit-transform: skewX(-45deg); 
    z-index: 10; 
} 

.slide-title-red-wrap { 
    position: relative; 
} 

.slide-title-red-container { 
    position: absolute; 
    left: -410px; 
    top: 693px; 
    background: rgba(5, 34, 162, 0.85); 
    height: 142px; 
    width: 60%; 
    transform: skewX(-45deg); 
    -ms-transform: skewX(-45deg); 
    -webkit-transform: skewX(-45deg); 
    z-index: 15; 
} 

.slide-title-red { 
    position: absolute; 
    top: 40%; 
    left: 50%; 
    transform: skewX(45deg); 
    -ms-transform: skewX(45deg); 
    -webkit-transform: skewX(45deg); 
    color: #fff; 
} 

Verschwommen Text (mit Karussell)

Klartext (ohne Karussell)

Hier Link meiner Test-Website:

http://www.matrix-test.com/roofing/

Jede Idee zu Löse dieses Problem?

Answer 1

Ich konnte dieses Problem in Bootstrap 4 beheben, indem Sie das backface-visibility Attribut der carousel-item auf Unset setzen.

Hier ist der Code.

.carousel-item { 
    -webkit-backface-visibility: unset!important; 
    backface-visibility: unset!important; 
}