혁명 슬라이더 배경 레이어 CSS

Question

혁명 슬라이더에 두 가지 유형의 슬라이드를 설정하려고합니다. 슬라이드의 기본 배경 이미지가 있고 반투명 레이어가 슬라이드의 왼쪽 또는 오른쪽의 40 %를 차지하고 그 위에 텍스트 레이어가 있습니다.

가

.rev_slider .slotholder:after{ 
width: 40%; 
height: 100%; 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
pointer-events: none; 

/* black overlay with 50% transparency */ 
background: rgba(0, 0, 0, 0.5); 
}' 

이 한 처리한다 : I는 "후"사이비 선택기를 사용하여 (아래 경우, 왼쪽에서 오른쪽 또는 왼쪽) 일 개 측면에 대한 반투명 층을 얻을 수있는 다음 CSS를 옆에는 투명도가 있지만 다른 슬라이드에는 적용되지 않으므로 부모 .slotholder 클래스에 "left"또는 "right"속성을 추가하는 슬라이드 관련 클래스가 필요합니다. 어떤 제안?

Answer 1

당신은 또한 사용하려고 할 수 있습니다 전에 오른쪽에 대해 "링크 & 서"섹션에서이 CSS를

.rev_slider .slotholder:after, .rev_slider .slotholder:before{ 
width: 40%; 
height: 100%; 
content: ""; 
position: absolute; 
top: 0; 

pointer-events: none; 

/* black overlay with 50% transparency */ 
background: rgba(0, 0, 0, 0.5); 
} 
.rev_slider .slotholder:before{ 
    right: 0; 
} 
.rev_slider .slotholder:after{ 
    left: 0; 
} 

Answer 2

를 사용 보시기 바랍니다의 <li>에 클래스를 추가 할 수있는 필드가 슬라이드 - 클래스 (예 : "오른쪽 텍스트", "왼쪽 텍스트")를 추가하고 적절한 CSS 규칙을 적용 할 수 있습니다.

left-text .slotholder:after{ 
    width: 40%; 
    height: 100%; 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    pointer-events: none; 

    /* black overlay with 50% transparency */ 
    background: rgba(0, 0, 0, 0.5); 
}