Revolution滑塊背景層CSS

Question

我試圖在Revolution滑塊中設置兩種類型的幻燈片。將有幻燈片的主要背景圖像，然後半透明層佔據幻燈片的左側或右側的40％，並具有高於此的文本層。我有使用「後」僞選擇器下面的CSS，可以實現對一側上的半透明層（右或左，在以下的情況下，左側）：

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

這需要所述一個的護理而不是其他的，所以我需要一個幻燈片特定的類，它爲父類.slotholder類添加了「左」或「右」屬性。有什麼建議麼？

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