Tengo un problema con el carrusel de búhos, intenté de muchas maneras eliminar la superposición pero no funcionó, quiero mantener los colores originales de la imagen , ¿alguien puede ayudarme a encontrar una solución?
Soy un principiante con el uso de carrusel. No puedo encontrar donde tengo que cambiar esta configuración.
Puedes ver el carrusel de mi plantilla.
<section class="banner-section banner-one banner-one-page" id="home"> <div class="banner-carousel owl-theme owl-carousel"> <!-- Slide Item --> <div class="slide-item"> <div class="image-layer" style="background-image: url(images/main-slider/2.jpg);"></div> <div class="auto-container"> <div class="content-box"> <div class="content"> <div class="inner text-center"> <div class="sub-title">welcome to Linoor agency</div> <h1>Discover <br> <span>new linoor agency</span></h1> <div class="link-box"> <a class="theme-btn btn-style-one" href="about.html"> <i class="btn-curve"></i> <span class="btn-title">Discover More</span> </a> <div class="vid-link"> <a href="https://www.youtube.com/watch?v=Get7rqXYrbQ" class="lightbox-image"> <div class="icon"><span class="flaticon-play-button-1"></span><i class="ripple"></i></div> </a> </div> </div> </div> </div> </div> </div> </div>Aquí puede ver todos los archivos en la carpeta JS, CSS: https://imgur.com/Rl0MbcJ
Aquí puede ver la plantilla: http://layerdrops.com/linoor/one-page.html
Cualquier elemento del carrusel tiene un pseudo-elemento before con estos estilos:
.banner-carousel .slide-item:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--thm-black); opacity: 0.6; z-index: 1; } si agrega en su archivo css el estilo .banner-carousel .slide-item:before { display: none; } , eliminará la superposición negra translúcida.