html - 覆盖覆盖的背景图像。

Question

我正在处理使用内联样式放置的背景图像，该图像具有覆盖图像的红色调。

当红色覆盖内容时会出现问题。

如何让红色调出现在按钮和文本下方？

请参阅JS Fiddle

感谢帮助

#cover-wrap {
  position: relative;
}
#cover-wrap .black-cover {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
}
#backgrond-cover {
  background-color: #37383a;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 50px;
  color: #fff;
  position: relative;
}
#backgrond-cover .username {
  font-weight: bold;
  margin-top: 10px;
}
#backgrond-cover .location {
  font-size: 14px;
}
#backgrond-cover .summary {
  font-size: 14px;
  margin-bottom: 20px;
}

Answer 1

如果你想让按钮覆盖在覆盖的红色色调上。然后将按钮移动到红色平面上方。

要实现这一点，您需要为按钮提供一个 z-index(想象图中的 z 轴)正值将其置于上方，而负值将其向下推。但是要给出 z 轴的相对定位，您还必须将 css 位置指定为 relative

将此 css 添加到代码的底部...

   button{
       position:relative;
       z-index:10;
   }

现在这将针对页面中的所有按钮。如果您只想定位特定按钮，请为按钮指定一个 ID 或类。

您的代码中还有一个未闭合的段落标记

。不确定您是否有复制粘贴错误