1

Вопрос следующий, возможно ли наложить и позиционировать изображение в 2-ух div? Т.е. мне нужно чтобы часть одного изображения была в одном div, а часть в другом, но при этом это было одно изображение, без разделения на части - такое в принципе осуществимо средствами css? Смысл в чем, есть один div с меню, другой с контентом (справа) нужно добиться чтобы эта картинка было под меню слева (листочки), а остальная часть продолжалась уже в контенте.

введите сюда описание изображения

Вот собственно чего я добиваюсь, но, часть картинки, которая заходит за меню (листья), не должны быть на других страницах.

9
  • Конечно можно. Где пример? Замысел пазлов/мозайки?
    – Doofy
    19 июл 2016 в 22:41
  • Если бы вы дали больше информации и визуально показали бы пример, что вы пытаетесь добиться, тогда было бы проще понять, чем вам помочь.
    – And
    19 июл 2016 в 23:02
  • Листья должны быть за кнопками или на них?
    – Doofy
    20 июл 2016 в 0:49
  • Или там кнопки вообще картинкой идут?
    – Doofy
    20 июл 2016 в 0:57
  • @Doofy, Кнопки с background-image да, листья должны быть за кнопками.
    – Денис
    20 июл 2016 в 0:59

3 ответа 3

1

Если дивы стоят рядом то нужно просто добавить картинку в один блок и задать ей отрицательный margin с той стороны, с которой расположен второй блок. Либо поставить картинку на фон каждому блоку и спозиционировать как делают спрайты.

1

Самый лучший вариант использовать спрайты

function move(g) {
  g.onmousemove = function(e) {
    g.style.marginLeft = 
    parseInt(g.style.marginLeft) <= 100 ? parseInt(g.style.marginLeft) + e.movementX + 'px'
    : 100 + 'px';
    return false;
  }
  
  g.onmouseleave = function() { g.onmousemove = null; }
  g.onmouseup = function() { g.onmousemove = null; }
}
body { margin-left: -160px; }

.image {
  width: 313px;
  height: 234px;
  background: url('https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg') no-repeat;
  float: left;
}

.left { background-position: 156px 0; }
.right { background-position: -156px 0; cursor: pointer; }
<div class='image left'></div>
<div class='image right' onmousedown='move(this)' style='margin-left: 16px'></div>

3
  • я так понял если использовать данный способ, то часть картинки останется под меню, после того как я открою другой контент справа, верно?
    – Денис
    20 июл 2016 в 0:31
  • @Денис, я вообще не понял вопроса. Слева там кнопки, позади кнопок одна картинка и всё. Что требуется-то?
    – Doofy
    20 июл 2016 в 0:34
  • обновил вопрос.
    – Денис
    20 июл 2016 в 0:48
1

я не знаю так надо или нет но вроде как у вас описано , фон детё я специально вставил что бы было видно наложение из одного в другой блок

*{
   margin:0;
   padding:0;
   text-decoration:none;
}
html,body{
  height:100%;
}
.wrapper{
  width:800px;
  min-height:500px;
  position:relative;
  margin:20px auto;
}
.wrapper:after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:0; right:0;
  background:url(http://www.playcast.ru/uploads/2014/09/03/9718884.png),rgba(0,0,0,.3);
}
.left{
  width:30%;
  min-height:500px;
  background:reansparent;
  position:relative;
  float:left;
}
.left:after{
  content:"";
  position:absolute;
  left:10%;
  top:0;
  width:200%;
  min-height:500px;
  background:url(http://boombob.ru/img/picture/Apr/21/a554b52cfd4b7d3220927cef413aef2e/1.jpg);
  background-size:100% 100%;
  z-index:6;
}
.left ul{
  position:relative;
  z-index:1000;
  left:24px;
}
.left li{
 margin:2px 0;
 background:rgba(255,246,0,1);
 padding:6px 20px;
 list-style:none;
 position:relative;
 transition:all .2s;
}
ul li:after{
  content:'Cамое лучшее у нас на проекте';
  position:absolute;
  display:block;
  width:100%; height:100%;
  left:110%; top:0;
  background:yellow;
  line-height:27px;
  opacity:0;
}
ul li:before{
  content:"";
  border:16px solid transparent;
  border-right:16px solid yellow;
  position:absolute;
  right:-24px; top:0px;
  opacity:0;
}
ul li:hover:after{
  opacity:1;
}
ul li:hover:before{
  opacity:1;
}
ul li:after,
ul li:before{
  transition:all .5s;
}
.right{
  width:50%;
  float:left;
  position:relative;
  z-index:100;
  margin-left:50px;
  border:1px solid ;
  padding:10px 20px;
  background:rgba(0,0,0,.2);
  color:#fefefe;
}
<div class="wrapper"> 
  <div class="left"> 
    <ul>
     <li><a href="">Пункт меню 1</a></li>
     <li><a href="">Пункт меню 2</a></li>
     <li><a href="">Пункт меню 3</a></li>
    </ul>
  </div>
  <div class="right"> 
     <div class="post"> 
        <p> 
         Curabitur aliquet quam id dui posuere blandit. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat.
        </p>
     </div>
  </div>
</div>

1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.