¿Cómo hacer que las imágenes del control deslizante sean más oscuras?

Tengo Revolution Slider instalado en mi WordPress. El objetivo es poner una superposición oscura con opacity=0.3 sobre las diapositivas… Traté de superponer .div con una posición absoluta, pero cubría todo el control deslizante, incluidos sus elementos de control como “siguiente diapositiva”, “diapositiva anterior” y otros.

Por lo tanto, necesito colocar esta superposición entre la imagen de la diapositiva y los controles deslizantes. He encontrado código con imagen.

<div class="tp-bgimg defaultimg" data-lazyload="undefined" data-bgfit="cover" data-bgposition="center top" data-bgrepeat="no-repeat" data-lazydone="undefined" src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" data-src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" style="width: 100%; height: 100%; visibility: inherit; opacity: 1; background-image: url(http://wp-themes/wp-content/uploads/2015/04/slider1.png); background-color: rgba(0, 0, 0, 0); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat;"></div>

Entonces escribí esto

 $('.tp-bgimg').before('<div class="slider-area-overlay"></div>');

Nada cambia. no se porque

Siguiente paso: hagámoslo a través de css.

.tp-bgimg { position: relative; }

.tp-bgimg:before {
    background: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    content: "";
}

Es genial, pero la imagen de la diapositiva aparece sin cambios, y luego, después de 1-2 segundos, aparecen mis estilos CSS.

Realmente no tengo idea de cómo decidir este problema, por favor ayúdame.

Las preguntas frecuentes de Slider Revolution ofrecen 3 soluciones para esto:

• Opción 1) Habilitar su superposición integrada

  Esto se puede encontrar en la configuración de apariencia del control deslizante, barra lateral. Deberá cambiar la opción “Tamaño de superposición punteada”:

  

• Opción 2) Agregue uno de los siguientes bloques CSS al “CSS personalizado” para su diapositiva

  Personalmente lo agregué al Global Slider CSS, por lo que afectó a todas mis diapositivas.

  1. Si sus diapositivas individuales tienen subtítulos:

     .rev_slider .slotholder:after {
         width: 100%;
         height: 100%;
         content: "";
         position: absolute;
         left: 0;
         top: 0;
         pointer-events: none;
     
         /* black overlay with 50% transparency */
         background: rgba(0, 0, 0, 0.5);
     }
     

  2. Si sus diapositivas individuales no haga tener subtítulos:

     .rev_slider:after {
         width: 100%;
         height: 100%;
         content: "";
         position: absolute;
         left: 0;
         top: 0;
         z-index: 99;
         pointer-events: none;
     
         /* black overlay with 50% transparency */
         background: rgba(0, 0, 0, 0.5);
     }
     

• Opción 3) Use software de edición de imágenes, por ejemplo, Adobe Photoshop, para aplicar manualmente una superposición oscura a sus imágenes, luego use las imágenes oscuras como fondo de diapositiva.

  El enfoque más simple es agregar una capa sobre su imagen, pintarla de negro y luego reducir la transparencia de la capa negra a alrededor del 50%.

  

Las soluciones e instrucciones proporcionadas por Slider Revolution están disponibles aquí.

Primero debes extender el estilo de .rev_slider .slotholder (no de .tp-bgimg), porque la animación de inicio crea elementos adicionales.

En segundo lugar, el control deslizante crea un duplicado de su imagen para la animación, que tiene un índice z mayor que el índice z de la imagen de origen.

Prueba esto, funcionará bien.

.rev_slider .slotholder:after, .rev_slider .slotholder .kenburnimg img:after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 99;
    background: rgba(0,0,0,.5);
}

¡Encontré una manera súper fácil que funciona!

Crea una nueva forma. Asigne un nombre a la superposición de capas y arrástrela hacia la parte superior. Coloréalo de negro. Cambia la opacidad al 50%. El ancho y la altura deben ser del 100%. Elija “Estirar” en el modo de portada. Casi termino. Un paso más.

Finalmente, vaya a Comportamiento y cambie Alinear a “Basado en diapositivas”. Esto realmente estirará la superposición al 100%.

¿No puedes encontrarlo? Consulta este enlace.

https://www.themepunch.com/faq/posición-o-tamaño-incorrecto-para-botón-o-forma-de-texto/

Desplácese al paso 3. Ajuste la alineación receptiva.

Ojalá esto fuera más fácil, pero no lo es. No me gusta la superposición de puntos que incluyen en la configuración. Espero que esto ayude a alguien.

Solo en caso de que el video agregue z-index y cambie la clase css:

.rs-background-video-layer:before {
        width: 100%;
        height: 100%;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
        z-index:1;
        background: rgba(0, 0, 0, 0.3);
    }

Encontré una actualización para la versión 6 de Slider Revolution, ya que esto ya no funcionará en las versiones más nuevas:

.rev_slider .slotholder:after,
#rev_slider_2_1 rs-sbg:after
{
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: rgba(30,30,30,0.5);
}

La segunda entrada lo hará para esta presentación de diapositivas específica (#rev_slider_2_1).

Para tener un enfoque más común para todas las diapositivas que sea equivalente a la solución anterior, podría usar algo como esto:

.rev_slider .slotholder:after,
rs-sbg-wrap rs-sbg:after
{
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: rgba(30,30,30,0.5);
}