В основном я пытаюсь создать отражение изображения с помощью CSS, как показано ниже (и/или jQuery, но не то, что действительно повлияет на производительность). Это также должно работать отзывчиво.
Идея состоит в том, что будет iMac PNG (с отверстием, вырезанным для скриншотов сайта), а затем, используя систему управления контентом, я загрузил бы скриншот сайта, и он был бы помещен внутри и позади экрана, чтобы показать ... , все это работает нормально, но я хочу, чтобы скриншот экрана и сайта отражался ниже. Я знаю, что это очень тонко, но если это возможно, я хотел бы это сделать.
Это структура кода, которую я планирую использовать, не стесняйтесь использовать ее в любых примерах :)
ДЕМО: http://codepen.io/anon/pen/gKnry
<div class="screen_contain">
<img src="imac-image.png" class="imac">
<img src="website_image.png" class="website">
</div>
.screen_contain {
display:inline-block;
position: relative;
width:33%;
}
.imac {
width: 100%;
position: relative;
z-index: 10;
}
.website {
position: absolute;
left: 5.0%;
top: 5%;
width: 90%;
z-index: 5;
}
Примечания:
- Очевидно, я мог бы объединить образ iMac, чтобы он имел основной iMac И его отражение в одном изображении ... сэкономив на запросах и грязном коде.
- Это будет заполнено клиентом, поэтому все, что он сможет сделать, это загрузить скриншот веб-сайта.
Спасибо!
Chrome 
