修改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放在其頂部。 最后，通過設置負的z-index： z-index: -1來告知.bkg-overlay div出現在每隔一個div以下。