有過黑暗的形象

Question

明亮的文本，我有以下CSS組件：

<div className="dimmed-image" style={itemStyle}> 
    <div className="bright-text"> 
     <br/> 
     <h2 className="white-center">Some text</h2> 
    </div> 
</div> 

的itemStyle變量引用的背景圖像。

var itemStyle = { 
    backgroundImage: 'url(' + imageLocation + ')' 
}; 

的css類是這些：

.dimmed-image { 
    -webkit-filter: brightness(60%); 
} 

.bright-text { 
    -webkit-filter: brightness(100%) !important; 
} 

我想有過這是黑暗的圖像白色文本。

但是，如果我使用上面的代碼，文本也會變暗。

如果我讓兩個獨立的div類是這樣的：

<div className="dimmed-image" style={itemStyle}> 
</div> 
<div className="bright-text"> 
    <br/> 
    <h2 className="white-center">Some text</h2> 
</div> 

然後將文本放在圖像下方。

如何在黑暗的圖像上顯示明亮的文字？

Answer 1

要使文本跳回圖像的頂部只適用position: absolute到.dimmed-image：

.dimmed-image { 
    ... 
    position: absolute; 
} 

這將帶圖像的正常渲染之外，只要你不指定任何其他位置將使它保持在同一個地方。同時，下面的元素（例如文本）將忽略圖像並從圖像開始的同一點開始渲染。

Answer 2

將調暗的圖像和文本放在單獨的div中，並將它們一起包裝在容器div中。

賦予容器div與包含圖像的寬度和高度相同的寬度和高度。對bright-text div也一樣。使用position將您的文字放置在圖像上方。

這是最好的方法。

另外className無效。改爲使用class。

HTML：

<div class="dimmed-image-wrapper"> 
    <div class="dimmed-image" style={itemStyle}> 
    </div> 
    <div class="bright-text"> 
    <br/> 
    <h2 class="white-center">Some text</h2> 
    </div> 
</div> 

CSS

.dimmed-image { 
    -webkit-filter: brightness(60%); 
} 

.dimmed-image-wrapper { 
    position: relative; 
    width: [same-as-dimmed-image]px; 
    height: [same-as-dimmed-image]px; 
} 

.bright-text { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: [same-as-dimmed-image]px; 
    height: [same-as-dimmed-image]px; 
} 

的.bright-text DIV你也可以使用position，left和top CSS規則周圍文本移動，如果你想裏面。