Question

我的html页面中有一个带有白色背景色的按钮，然后是一个带有文本hello的范围。我已经将我的按钮和跨度包裹在具有id覆盖的div中。对于该叠加层ID，我给z-index为10的背景色为棕色，但是按钮上没有棕色。可能是什么问题？

button {
  background: white;
  color: blanchedalmond;
}

#overlay {
  z-index: 10;
  background: brown;
}

<div id="overlay">
  <button>Next</button>
  <span>hello</span>
</div>

Answer 1

将按钮- IN_ACCESS, IN_MODIFY, IN_CREATE, IN_DELETE... are supported by version 2.6.13 - IN_DONT_FOLLOW starts support from version 2.6.15+设置为棕色

background

Answer 2

z-index仅适用于定位的元素。您的代码中有静态位置。该按钮出现在叠加层容器之后。

Answer 3

首先，您需要了解，在DOM结构中，默认情况下元素堆叠在其父元素之上。因此，孩子的背景将使父母的背景蒙上阴影。创建叠加效果您需要使用位置结构（绝对）或z-index将其堆叠到顶部。

Answer 4

button {
  background: white;
  color: blanchedalmond;
}
#overlay{
  position:relative;
}
#overlay:after {
  z-index: 10;
  position:absolute;
  background: rgba(255,255,0,0.5);
  top:0;
  left:0;
  right:0;
  bottom:0;
  content:"";
}

<div id="overlay">
  <button>Next</button>
  <span>hello</span>
</div>

Answer 5

不确定是否要寻找这个。仅使用CSS，这将使按钮透明并使按钮不可单击

button {
  background: transparent;
  border: 0;
  color: blanchedalmond;
  pointer-events:none;
}

#overlay {
  z-index: 10;
  background: brown;
}

<div id="overlay">
  <button>Next</button>
  <span>hello</span>
</div>

Answer 6

您已经给背景设置了背景：白色为按钮，这就是为什么它在背景中显示白色的原因，只需将（background：white;）替换为（background：transparent;）并将按钮的color属性更改为相对于颜色；

div覆盖背景颜色的按钮

6 个答案: