将文字带到橙色背景的前面

Question

我整天都在尝试将文字放在橙色背景的前面。这是我到目前为止的代码。

<div class="events-main">
</div>
<div class="events-header">
</div>
<div id="events-header">
    <h3>Thunder Struck Events</h3>
</div>

我的CSS是：

.events-main {
    background: url(../images/bnr.jpg) ;
    height: 600px;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: -25px;
    width: 100%;
}
.events-header {
    background-color: orange;
    opacity: 0.6;
    width: 500px;
    height: 500px;
    float: right;
    margin-top: -550px;
    margin-right: 0;
}
#events-header h3{
    margin-top: -520px;
    margin-left: 1100px;
    z-index: -1;
}

我还提供了橙色背景后面的文本的屏幕截图，但我希望文本位于橙色背景的顶部。

任何帮助将不胜感激，并提前致谢。

Answer 1

也许尝试将positon: absolute;和z-index: 1;添加到您的h3的父容器中，这对我有用。

Answer 2

您的代码中发生了一些非常疯狂的事情。图表的负边距。

这是您要实现的目标吗？

.events-main {
    background: url(https://www.billboard.com/files/styles/768x433/public/media/Backstreet-Boys-1997-portrait-billboard-1548.jpg) ;
    height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 500px;
}
.events-header {
    background-color: orange;
    opacity: 0.6;
    width: 100%;
    height: 100%;
    top: 0;
}
h3{
 padding: 20px;
}

<div class="events-main">
  <div class="events-header">
    <h3>Thunder Struck Events</h3>
  </div>
</div>

Answer 3

使用负边距进行定位可能很棘手，请尽量避免。您的对象具有自然的层次结构，请使用它。

新的和改进的版本

background-image: [el1],[el2];中可以从头到尾堆叠多个背景图像/渐变，因此在这种情况下，el1位于el2的上方。

这给出了没有伪元素的以下内容

/*Main Element with bakcground image*/

.events-main {
  /*Magic Here!!*/
  /*The firt element is our gradient/color with opacity, see: http://www.colorzilla.com/gradient-editor/#ed8e2f+0,e8ac71+100&0.6+0,0.65+100*/
  /*The second element is the actual image.*/
  /*Note you can have the gradient accross opacity too, much fun to be had here.*/
  background-image: linear-gradient(135deg, rgba(237, 142, 47, 0.6) 0%, rgba(232, 172, 113, 0.65) 100%), url(https://www.fillmurray.com/g/1000/600);
  height: 600px;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

h3 {
  padding: 20px;
}

<div class="events-main">
  <h3>Thunder Struck Events2</h3>
</div>

旧版本

您也可以使用伪元素来避免仅用于样式设置的额外html元素。

/*Main Element with bakcground image*/
.events-main {
  background-image: url(https://www.fillmurray.com/g/1000/600);
  height: 600px;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  position: relative;  
}

/*Use an after psuedo elemtent for our wash*/
.events-main::after {
  /*I've used a gradient for the orange overlay, this also incorpoates opacity*/
  background-image: linear-gradient(135deg, rgba(237,142,47,0.6) 0%,rgba(232,172,113,0.65) 100%);
  width: 100%;
  height: 100%;  
  display: block;
  content: '';
  position: absolute;
  z-index:1;
  top:0;
}

#events-header h3 {
  padding: 20px;
  z-index:10; 
  /*Need position for z-index to take effect*/
  position:relative;
}

<div class="events-main">
  <div id="events-header">
    <h3>Thunder Struck Events2</h3>
  </div>
</div>

注意：：对于这两个版本，您实际上不需要 events-header div，除非您打算在其中放置其他内容。