I have a image background on a first div. Then I want to have a div (show here for convenience with orange background) and another box "above" it with comments (called "comments box").
我在第一个div上有一个图像背景。然后我想要一个div(这里为了方便橙色背景显示)和另一个带有注释的“上面”框(称为“注释框”)。
The problem is that I DON'T want the content of the "orange-zone' to be shown UNDER it.
问题是我不希望“橙色区域”的内容显示在它之下。
Here is what I have CURRENTLY :
以下是我目前的情况:
我当前代码的问题是我在“橙色区域”div中放置的一些内容在评论框下面,这很难看。
Here is a jsfiddle for this: http://jsfiddle.net/uu0xe2xL/1/ :
这是一个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;
}
Here is what I want to achieve.
这就是我想要实现的目标。
Notice how the orange never gets under the Comment-zone BUT the background image with an island is still visible UNDER the "comment box", which is what I want to achieve).
注意橘子永远不会在评论区域下面,但是在“评论框”下仍然可以看到带有岛屿的背景图像,这是我想要实现的。
Also I want text to be put on the orange zone and I can't put the background image in the body tag as it has to start right after the menu, so it has a of its own.
此外,我希望文本放在橙色区域,我不能将背景图像放在body标签中,因为它必须在菜单后面开始,所以它有自己的。
Feel free to update this jsfiddle
随意更新这个jsfiddle
2 个解决方案
#1
2
If the border solution sdcr made won't work for you, you can give the inner div the same background as the outer div, and set the background-position so that they both line up. EDIT: Added color layer.
如果边框解决方案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%;
}
EDIT: Just wanted to add, you can pretty easily automate that with Javascript as well if you want.
编辑:只是想添加,你可以很容易地使用Javascript自动化,如果你想。
#2
6
The main idea is using borders to create the solid background color. See the following demo and notes inline.
主要思想是使用边框来创建纯色背景。请参阅以下演示和内联说明。
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;
}<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>#1
2
If the border solution sdcr made won't work for you, you can give the inner div the same background as the outer div, and set the background-position so that they both line up. EDIT: Added color layer.
如果边框解决方案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%;
}
EDIT: Just wanted to add, you can pretty easily automate that with Javascript as well if you want.
编辑:只是想添加,你可以很容易地使用Javascript自动化,如果你想。
#2
6
The main idea is using borders to create the solid background color. See the following demo and notes inline.
主要思想是使用边框来创建纯色背景。请参阅以下演示和内联说明。
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;
}<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>