슬라이더 이미지를 어둡게 하는 방법

슬라이더 이미지를 어둡게 하는 방법

WordPress에 회전 슬라이더가 설치되어 있습니다.그 목적은 어두운 오버레이를 씌우는 것이다.opacity=0.3슬라이드 위에...overlay .div를 절대위치로 만들려고 했는데 "next slide", "previous slide" 등의 제어요소를 포함한 모든 슬라이더를 커버했습니다.

그래서 이 오버레이를 슬라이드 이미지와 슬라이더 컨트롤 사이에 넣어야 합니다.이미지가 있는 코드를 찾았습니다.

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

그리고 나는 이것을 썼다.

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

아무것도 변하지 않았다.왜 그랬는지 모르겠어.

다음 단계: 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: "";
}

쿨하지만 슬라이드 이미지는 변경되지 않고 표시되며 1~2초 후에 css 스타일이 나타납니다.

이 문제를 어떻게 결정해야 할지 정말 모르겠어요, 도와주세요.

Slider Revolution FAQ는 이에 대한 3가지 해결책을 제공합니다.

• 옵션 1) 내장 오버레이 활성화

  이것은 슬라이더 어피아란스 설정, 사이드바에서 확인할 수 있습니다."점 중첩 크기" 옵션을 변경할 수 있습니다.

  

• 옵션 2) 다음 중 하나의 CSS 블록을 슬라이드의 "커스텀 CSS"에 추가합니다.

  글로벌 슬라이더 CSS에 직접 추가했기 때문에 모든 슬라이드에 영향을 미쳤습니다.

  1. 개별 슬라이드에 캡션이 있는 경우:

     .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. 개별 슬라이드에 캡션이 없는 경우:

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

• 옵션 3) Adobe Photoshop 등의 이미지 편집 소프트웨어를 사용하여 이미지에 어두운 오버레이를 수동으로 적용한 다음 어두운 이미지를 슬라이드 배경으로 사용합니다.

  가장 간단한 방법은 이미지 위에 레이어를 추가하고 검은색으로 칠한 다음 검은색 레이어의 투명도를 약 50%로 줄이는 것입니다.

  

---

Slider Revolution에서 제공하는 솔루션 및 지침은 여기에서 확인할 수 있습니다.

먼저 스타일을 확장해야 합니다..rev_slider .slotholder(의 것이 아님).tp-bgimg시작 애니메이션이 추가 요소를 생성하기 때문입니다.

둘째, 슬라이더는 원본 이미지 z-index보다 z-index가 많은 애니메이션용 이미지의 복제를 만듭니다.

이거 한번 해봐, 잘 될 거야.

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

매우 간단한 작동 방법을 찾았습니다!

새 도형을 만듭니다.레이어 오버레이의 이름을 지정하고 맨 위로 끕니다.검은색으로 칠하세요.불투명도를 50%로 변경합니다.폭과 높이는 100%여야 합니다.커버 모드에서 "스트레치"를 선택합니다.거의 끝났다.한 발짝만 더.

마지막으로 동작으로 이동하고 Align을 "Slide Based"로 전환합니다.이렇게 하면 오버레이가 100%까지 늘어납니다.

못 찾겠어?이 링크를 확인합니다.

https://www.themepunch.com/faq/incorrect-position-or-size-for-text-button-or-shape/

스텝 3까지 스크롤합니다.응답 정렬을 조정합니다.

이게 더 쉬웠으면 좋겠지만 그렇지 않아.설정에 포함된 점 중첩이 마음에 들지 않습니다.이게 도움이 됐으면 좋겠네요.

비디오의 경우 z-index를 추가하고 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);
    }

Slider Revolution 버전 6에 대한 업데이트를 찾았습니다. 새 버전에서는 더 이상 이 업데이트가 작동하지 않습니다.

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

secound 엔트리는 이 특정 슬라이드 쇼(#rev_slider_2_1)에 대해 실행됩니다.

모든 슬라이드에 대해 이전 솔루션과 동일한 공통 접근 방식을 사용하려면 다음과 같은 방법을 사용할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/29679363/how-to-make-slider-images-darker