如何在保持相同图像背景的同时在div中制作div

Mathieu 发表于 Dev

马修

我在第一格上有图像背景。然后，我要创建一个div（为方便起见，此处显示为橙色背景），并在其上方带有注释的另一个框（称为“注释框”）。

问题是我不希望在其下方显示“橙色区域”的内容。

这是我目前拥有的：

在此处输入图片说明当前代码的问题是，我在“橙色区域” div中放入的某些内容确实在“注释”框下，这很难看。

这是为此的jsfiddle：http : //jsfiddle.net/uu0xe2xL/1/：

的HTML

<body class='example-page'>

<div id="content">
  <div class="page-main-image" >
  </div>
  <!--div with orange background -->
  <div id="orange-zone">  
  </div>
  <!-- comment box -->
  <div class="comment-box comment" style="opacity: 1;">
      xxx it's cool to comment<br/>
      nice one dude
   </div>
</div>
</body>

的CSS

html {
    height:100%;
}

body.example-page {
    height:100%;
}

#content {
    height: 100%;
    margin-top: 18px;
    @media (max-width: 767px) {
        margin-top: 9px;
    }
}
.page-main-image {
    height: 100%;
    background: url('http://www.thedrum.com/uploads/drum_basic_article/115509/main_images/BBCb.jpg'); background-size: cover; background-repeat: no-repeat;
}

#orange-zone {
    position:fixed;
    top:10%; 
    left:30%;
    width:100%;
    height:100%; 
    background-color:orange;
}
.treasure{
  position: absolute;
}

.comment-box {
  position:relative;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 10px;
  bottom:5%;
  right:5%;
}
.comment {
  position:absolute;  
}

这是我要实现的目标。

在此处输入图片说明

请注意，橘子如何永远不会进入“注释区”之下，但是在“注释框”下，仍然可以看到带有岛的背景图像，这是我想要实现的。

另外，我希望将文本放置在橙色区域，并且不能将背景图像放置在body标签中，因为它必须在菜单之后立即开始，因此它具有其自身的特征。

随时更新此jsfiddle

卡森起重机

如果边界解决方案sdcr对您不起作用，则可以为内部div提供与外部div相同的背景，并设置背景位置，使它们都对齐。编辑：添加了颜色层。

* {
    margin: 0;
    padding: 0;
}

#background {
    background-image: url('http://www.desktopaper.com/wp-content/uploads/tropical-island-wallpaper.jpg');
    width: 700px;
    height: 700px;
}

#innertext {
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
    top: 50px;
    left: 50px;
}

#transparent {
    width: 100px;
    height: 100px;
    position: relative;
    background-image: url('http://www.desktopaper.com/wp-content/uploads/tropical-island-wallpaper.jpg');
    background-position: -75px -75px;
    top: 25px;
    left: 25px;
}

#colorlayer {
    background-color: rgba(255, 0, 0, .3);
    height: 100%;
}