修改 CSS 时的灰度变化

Question

我正在尝试将背景更改为灰度，但不是其顶部的标题或描述。

我使用 Drupal 作为 CMS，并修改目录中的 CSS 文件。主题是彩色玻璃。我最初确实在 Drupal Stack Exchange 中打开了它，但它已关闭，我被建议在普通 Stack Exchange 中打开它。

这是有问题的代码部分：

.home-welcome {
background-image: url(images/css-header-header-amic-main-background.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
min-height: 650px;
font-family: roboto;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

.home-welcome .main-title {
margin-top: 145px;
font-size: 10em;
font-family: roboto;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

.home-welcome .main-desc {
margin-top: 5px;
font-size: 1.5em;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

奇怪的是，如果我使用背景图像颜色，以及灰度的描述和标题，那就可以了。只是不是相反。

我也尝试过使用 filter: none，但这也不起作用。

http://www.ubereadoolische.com/drupal3/

如果我可以更改我的 html，那么我可以按照 http://codepen.io/aniketpant/pen/DsEve 上的说明进行操作 - 但它必须是 CSS 修正，因为我只能更改 Drupal 中的 CSS（代码是用我不明白的 PHP 编写的）。我无法修改 HTML。

谁能帮忙？

谢谢詹姆斯

ps 请忽略我完全不完整的网站。

Answer 1

我认为你可以让它与你当前的 HTML 结构一起工作。您的结构中已经存在一个 div (.bkg-overlay)，您可以将其用作背景图像。我在 Chrome 中成功测试了以下内容：

.home-welcome {
  font-family: roboto;
  min-height: 650px;
  position: relative;
}

.bkg-overlay {
  background-image: url(images/css-header-header-amic-main-background.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 650px;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  position: absolute;
  width: 100%;
  z-index: -1;
}

如您所见，最初应用于.home-welcome 的大部分CSS 代码现在都应用于.bkg-overlay。 .home-welcome div 在位置方面是其子 div (position: relative) 的引用，因此可以通过应用 position: absolute 将 .bkg-overlay 放置在其顶部。最后，.bkg-overlay div 被告知通过设置负 z-index 出现在所有其他 div 的下方：z-index: -1。