Question

我在第一个div上有一个图像背景。然后我想要一个div（这里为了方便橙色背景显示）和另一个盒子＆＃34;以上＆＃34;它带有注释（称为＆＃34;注释框＆＃34;）。

问题在于我不想要＆＃34;橙色区域＆＃39;的内容。在它下面显示。

这是我目前所拥有的：

enter image description here 我当前代码的问题在于我放入＆＃34;橙色区域的一些内容＆＃34; div DOES在评论框下面，这很难看。

这是一个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;  
}

这就是我想要实现的目标。

enter image description here

注意橘子永远不会在评论区域下面，但是带有岛屿的背景图像仍然可以在＆＃34;评论框＆＃34;下面看到，这是我想要实现的目标。

此外，我希望将文本放在橙色区域，并且我不能将背景图像放在body标签中，因为它必须在菜单后面开始，所以它有自己的。

随时更新此jsfiddle

Answer 1

主要思想是使用边框来创建纯色背景。请参阅以下演示和内联说明。

<强> JsFiddle Demo

＆＃13;

html, body {
    height: 100%;
    margin: 0;
}
/* setting up background image */
.container {
    background: url("http://i.imgur.com/V4xzKOv.jpg") 0 0 no-repeat;
    background-size: cover;
    position: relative;
    height: 100%;
}
/* creating the borders */
.container:before {
    content: "";
    display: block;
    background-color: rgba(0, 0, 0, .25);
    position: absolute;
    right: 20px;
    bottom: 20px;
    border-style: solid;
    border-color: orange;
    border-width: 20px 30px 90px 190px;
    width: 120px;
    height: 60px;
}
/* positioning the text */
.container p {
    position: absolute;
    width: 280px;
    right: 50px;
    bottom: 45px;
    overflow: auto;
    padding: 0;
    margin: 0;
}
/* creating placeholder and floating it */
.container p:before {
    content: "";
    float: right;
    width: 120px;
    height: 60px;
}

＆＃13;

<div class="container">
    <p>Gingerbread tootsie chocolate. Cheesecake gummi bears I love caramels gummies cake oat cake tootsie roll. Ice cream sesame snaps. Biscuit gingerbread I love gummi dragée bear chocolate cheesecake.</p>
</div>

＆＃13;

Answer 2

如果边框解决方案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%;
}

jsfiddle

编辑：只是想添加，如果你愿意的话，你可以很容易地用Javascript自动化。

如何在保持相同图像背景的同时在div中创建div

2 个答案: