使文本脫穎而出，當覆蓋在一個div背景圖片上

Question

我有兩個背景圖片，我希望使用，但是當我用覆蓋文本從一個div他們會被下面的圖像淹沒。

有什麼方法可以更好地突出顯示我的文字，同時仍保留圖像的清晰度和細節？

還可以選擇將文本覆蓋層移動一點到圖像的一部分，使其更清潔一些。

Answer 1

我在理解確切的問題時遇到了一些麻煩，因爲我不能說你是否說你看不到帶有背景圖像的文本，或者你說背景圖像覆蓋文本。

如果它是第一個，那麼只需嘗試更改'p的顏色，或者在CSS中使用'background-color'突出顯示。

如果你說圖像將文本全部阻擋在一起，那麼它可能是分層問題，並修復了只改變'z-index'的問題。

Answer 2

不知道所涉及的圖像的細節或文字顏色，很難確定什麼適合您的情況。

幾個選項映入腦海：

1.文字陰影

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.wrap { 
 
    padding: 1rem; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 320px; 
 
    width: 240px; 
 
    background-image: url(http://lorempixel.com/output/city-q-c-640-480-2.jpg); 
 
    background-size: cover; 
 
    text-align: center; 
 
} 
 
h2 { 
 
    text-shadow: 0 0 2px white; 
 
    padding-top: 50%; 
 
}

<div class="wrap"> 
 

 
    <h2>Title Text</h2> 
 

 
</div>

2. RGBA背景色

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.wrap { 
 
    padding: 1rem; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 320px; 
 
    width: 240px; 
 
    background-image: url(http://lorempixel.com/output/city-q-c-640-480-2.jpg); 
 
    background-size: cover; 
 
    text-align: center; 
 
    padding-top: 20%; 
 
} 
 
h2 { 
 
    background-color: rgba(255, 255, 255, 0.25); 
 
}

<div class="wrap"> 
 

 
    <h2>Title Text</h2> 
 

 
</div>