Наложение изображения на другой div

Если бы вы могли взглянуть на минуту на http://www.acehbus.com, вы можете увидеть, что изображение на экране iPhone полностью видно на экране. Я хочу знать, как сделать половину изображения наложением следующего div как на http://sociali.st. Я пробовал z-index, но он не работает. Спасибо вам за помощь.Наложение изображения на другой div

источник

2016-03-15 chronycles

я получил через ваш сайт, и у меня есть две вещи:

1) не использовать изображения с разрешением 649x1323. Половина этого размера будет в порядке .. есть много изображений этого телефона, и люди с более медленным соединением умрут на этом. И он по-прежнему используется только как мелкие большие пальцы, поэтому большие разрешения действительно не нужны.

2) Вы используете изображение как само по себе. Вместо этого используйте div и дайте изображение в качестве фона. Смотрите эту скрипку: https://jsfiddle.net/8xhucpx8/

div.image{ 
    width:300px; 
height:200px; 
background-image:url('http://www.acehbus.com/img/search.png'); 
background-position:top center; 
background-size:100% auto;  
background-repeat:no-repeat;}

источник

2016-03-15 15:13:47 Zorak

Ха-ха, я тоже это подумал, брат. Это версия хромает, я буду упорно трудиться, чтобы сделать следующую версию. Благодаря! – chronycles

Добро пожаловать :) Если этот ответ вам подходит, поместите его в качестве окончательного ответа. Также еще одно примечание: вы можете определить высоту: 100% и минимальную высоту, например 200px. Тогда, если текст будет короче изображения, изображение будет 200 пикселей. Если текст будет длиннее изображения, будет показано полное изображение. В этом случае вы сохраните структуру div, которую у вас есть сейчас - новый div будет находиться в субконтейнере основного div с текстом AND. – Zorak

и еще одна вещь, если вы посмотрите на текст каждого снимка экрана, я не знаю, как вытолкнуть текст по вертикали, даже если я попробовал вертикально выровненную середину, поэтому мне нужно сделать отступ до вершины 100-200px от текст. Проблема возникает, когда она просматривается на мобильном телефоне с большим пространством сверху. Как вертикально выровнять, с вашей точки зрения? Должен ли я иметь другой div для текста внутри div col-md-8? благодаря! – chronycles

Прежде всего, вы всегда можете проверить сайт, который вы хотите достичь, и попытаться применить его подход в своем проекте. Разметка и стили находятся под прямым доступом. Если вы заметили в примере, который вы указали, перекрывающий эффект достигается с помощью комбинации отрицательных полей и абсолютного позиционирования. Поэтому, если вы играете с этими свойствами, вы это сделаете. Я хотел бы пойти на что-то вроде этого:

<div class="iphone"></div> 

.iphone { 
    bottom: -100px; 
    position: relative; 
}

Смотри, я сделал некоторые эксперименты и сделал this скрипку

источник

2016-03-15 15:06:30 markoffden

Круто, я люблю эту идею! Спасибо – chronycles

Вы можете сделать это с помощью overflow: hidden первых дают фиксированную высоту до parent element изображений в вашем случае col-md-6. Так что-то вроде.

.col-md-6 { 
 
    height: 155px; 
 
    overflow: hidden; 
 
}

<div class="col-md-6"> 
 
    <img src="http://www.acehbus.com/img/search.png" alt="" width="200px" /> 
 
</div>

источник

2016-03-15 15:15:16

Наложение изображения на другой div

ответ

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