修改时灰度变化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%);
}

奇怪的是，如果我使用 background-image 颜色以及灰度的描述和标题，就可以了。恰恰相反。

我也尝试过使用过滤器：none，但这也不起作用。

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

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

我没办法修改

有人能帮忙吗？

谢谢詹姆斯

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

Answer 1

我想你可以让它与你当前的 HTML 结构一起工作。您的结构 (.bkg-overlay) 中已经存在 div，您可以将其用作背景图像。我在 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 现在是其子项 divs (position: relative) 的引用，因此 .bkg-overlay 可以放在它通过应用 position: absolute。最后，.bkg-overlay div 通过设置负 z-index 被告知出现在其他 div 下方：z-index: -1.

修改时灰度变化CSS

Grayscale Change When Amending CSS

html

css

drupal

drupal-7