如果在我的网站上使用 Bootstrap 4 轮播，我会得到模糊的文本

Question

我正在开发一个网站，我必须在该网站上放置一个 bootstrap 轮播和不同的文本（绝对元素）。

一旦我把轮播放在网站上，所有的文字都变得模糊不清，难以阅读。

我已经阅读了文本的 z-index 和轮播的 z-index 之间可能存在的问题，但我不知道如何解决它，因为我必须将此文本保留在轮播上。

这是我正在开发的图像：

这是我的代码：

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

模糊文本（带轮播）

明文（无轮播）

这里 link 我的测试网站：

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

有解决这个问题的想法吗？

Answer 1

我已经能够通过将 carousel-item 的 backface-visibility 属性设置为取消设置来解决 Bootstrap 4 中的这个问题。

这是代码。

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

如果在我的网站上使用 Bootstrap 4 轮播，我会得到模糊的文本

I got blurry text if use Bootstrap 4 carousel on my website

z-index

carousel

bootstrap-4