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。

有人可以帮忙吗？

谢谢James

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）的引用，因此可以通过应用.bkg-overlay将position: absolute放在其上面。最后，通过设置负z-index，.bkg-overlay div被告知显示在每个其他div下方：z-index: -1。

修改CSS时的灰度变化

1 个答案: