Как сделать div внутри div, сохраняя тот же фон изображения

У меня есть изображение фона на первом div. Тогда я хочу иметь div (показать здесь для удобства с оранжевым фоном) и еще одну коробку «выше» с комментариями (так называемый «поле комментариев»).Как сделать div внутри div, сохраняя тот же фон изображения

Проблема заключается в том, что я не хочу содержание «оранжевой зоне» будет показан под ним

Вот что у меня есть НАСТОЯЩЕЕ:.

enter image description here Проблема с моим током код является то, что некоторое содержание я ставлю в «оранжевой зоне» ДИВ НЕ гибнуть поле Комментарий, который является уродливым

Вот 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

Обратите внимание, как оранжевый никогда не попадает под Комментарий зоне НО фоновое изображение с острова все еще видны в «поле для комментариев», который является тем, что я хочу достичь).

Также я хочу, чтобы текст был помещен в оранжевую зону, и я не могу поместить фоновое изображение в тег тела, поскольку он должен начинаться сразу после меню, поэтому он имеет свой собственный.

Вы можете обновить эту jsfiddle

источник

2015-04-11 Mathieu

Если sdcr границы решение сделано не будет работать для вас, вы можете дать внутреннюю Див тот же фон, что и внешний DIV, и установите background-position, чтобы они совпадали. EDIT: Добавлен цветной слой.

* { 
    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

EDIT: Просто хотел бы добавить, вы можете очень легко автоматизировать, что с Javascript, а если вы хотите.

источник

2015-04-12 02:39:45

Основная идея заключается в использовании границы для создания сплошной цвет фона. См. Следующие демонстрации и примечания.

JsFiddle Demo

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>

источник

2015-04-11 14:11:34 Stickers

Как сделать div внутри div, сохраняя тот же фон изображения

ответ

Смежные вопросы