Jump to content

architec

Neophyte
  • Posts

    1
  • Joined

  • Last visited

Information

  • Sex
    мужской

architec's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Доброго всем дня, уважаемые эксперты! Как решается такая задача: <div class="ls-rubber-block ls-bg-heavenly"> <div id="ls-img-01"></div> <div id="ls-img-02"></div> </div> html { height: 100%; } body { height: 100%; margin: 0; padding: 0; font-family: 'PT Sans Caption', sans-serif; } /* Блок, который рвстягивается по высоте и ширине на 100% */ .ls-rubber-block { width: 100%; height: 100%; min-height: 100%; box-sizing: border-box; border: 0px solid #FF0004; overflow: hidden; clip: rect(0, 100%, 0, 100%); } #ls-img-01 { position: absolute; display: block; width: 700px; height: 600px; top: -200px; right: 30px; box-sizing: border-box; border: 0px solid #cccccc; background-image: url(http://lanasvetlaya.ru/landing/master_jelaemoy_jizni/img/header_flowerpot.png); background-size: 700px 600px; background-repeat: no-repeat; background-position: center center; } #ls-img-02 { position: absolute; display: block; width: 730px; height: 520px; top: 600px; right: -30px; box-sizing: border-box; border: 1px solid #cccccc; background-image: url(http://lanasvetlaya.ru/landing/master_jelaemoy_jizni/img/header_tablet.png); background-size: 730px 520px; background-repeat: no-repeat; background-position: center center; } Внутри родителя два блока, у каждого фоновое изображение. Собственно можно не фоном а через <img> тег. Как обрезать эти изображения родительским блоком? Если ставить clip, например, родителю, то сложность в том, что родитель резиновый и принимает 100% на 100% размер экрана. А вот такая конструкция: clip: rect(0, 100%, 0, 100%); Не дала видимого результата... Стремлюсь повторить такой же заголовок как здесь: http://gaze.tommusdemos.wpengine.com/homepages/startup-tokyo/# Благодарю за помощь! Ответ найден! Тем, кому это интересно: Я изучил ссылку на предмет свойств css и нашел там такие строки: Признаюсь, удивлен, ведь transform задействует преобразование объекта, но вот что он его обрезает - никак не мог представить. И признаться так и не понимаю до конца как это работает, но работает! Рекомендую для кросбраузерности добавить так: Желаю сем удачи!
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy