Question

我想要使用两张背景图片，但是当我用div中的文字覆盖它们时，它们会被下面的图像淹没。

有没有什么方法可以更好地突出我的文字，同时仍然保留图像的清晰度和细节？

还可以选择将文本叠加层移动到图像的一部分，使其更清晰。

Answer 1

我在理解确切的问题时遇到了一些麻烦，因为我无法判断你是否说你不能用你的背景图像看到文字，或者说你的说法是背景图片掩盖了文本。

如果是第一个颜色，那么只需尝试更改颜色，或者可以用背景颜色突出显示颜色＆＃39;在你的CSS中。

如果您说图像一起阻挡了文本，那么它可能是分层的问题并且修复它只是改变了＆＃39; z-index＆＃39;。

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>

叠加在div背景图像上时使文字突出

2 个答案: