Question

我有以下模板，我正在努力工作，我已经冒昧为每个div添加不同的颜色背景进行调试，基本上我有三个不同背景的div，这些背景需要有一个发光中心。为此，我尝试设置一个绝对定位的容器，不透明度为10％。然而，它覆盖了所有内容并忽略了z-index。

我知道我遗漏了一些简单的东西，但我已经看了太久了。

http://fwuse.com/n/没有发光，颜色不是他们调试的设计。添加了http://fwuse.com/n/glow.html Glow容器，只有菜单突出显示，其他一切都被隐藏了。 http://fwuse.com/n/glow-opacity.html具有不透明度的辉光容器，请注意，无法单击任何链接。

Answer 1

为什么不用CSS来发光？

#radial-center {
  /* fallback */
  background-color: #2F2727;
  background-position: center center;
  background-repeat: no-repeat;

  /* Safari 4-5, Chrome 1-9 */
  /* Can't specify a percentage size? Laaaaaame. */
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);

  /* Firefox 3.6+ */ 
  background: -moz-radial-gradient(circle, #1a82f7, #2F2727);

  /* IE 10 */ 
  background: -ms-radial-gradient(circle, #1a82f7, #2F2727);

  /* IE < 8 Linear gradient fallback */
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a82f7, endColorstr=#2F2727, GradientType=1)";

  /* IE 8/9 Linear gradient fallback */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a82f7, endColorstr=#2F2727, GradientType=1)";
  /* Opera cannot do radial gradients yet */

}

演示：http://jsfiddle.net/AlienWebguy/49d5g/

Answer 2

如果你可以让内容div没有背景颜色（背景：透明？）并且有z-index 3，而底层的“10％不透明度”div有z-index 2，它就可以了。我不确定background：transparent是否是CSS中的属性;）

Answer 3

#content-bg的z-index低于覆盖整个页面的光晕，因此消耗了内容的所有点击次数。将#content-bg的z-index更改为3似乎将其置于前面足以点击而不影响发光效果。

Answer 4

我修复了它，我必须设置#pagecontainer z-index并将背景div设置为z-index：auto。我将标题设置为z-index：501，内容为z-index：502，页脚为z-index 503，＃glow设置为z-index：1。

令人困惑的是，它有效，不知道为什么？

http://fwuse.com/no/

绝对定位的叠加忽略z-index

4 个答案: