使文本脱颖而出，当覆盖在一个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>