Перемещение рамки

@Samazar · Регистрация: 02.11.2011

Студворк — интернет-сервис помощи студентам

Добрый день! У меня следующая проблема:

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

HTML5
1
2
3
4
5
6
7
<div class='header'>
    <div class='tablet'>
        <div class='tablet-bg'>
            <img style='position: static;' src='/templates/autodeka/images/tablet.png'>
        </div>
    </div>
</div>

и CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.header{
    width: 1085px;
    height: 275px;
    background: url('../images/header.png') no-repeat;
    margin-top: 29px;
}
 
.tablet-bg{
    width: 150px;
    height: 190px;
    overflow: hidden;
}
 
.tablet{
    position: relative;
    left: 408px;
    top: 20px;
    width: 283px;
    height: 261px;
    background: url('../images/tabletbg.png') no-repeat;
}

В любом случае смещается вместе со вторым изображением (tablet.png)

Как их отвязать друг от друга?

@ayrat_net · 13.12.2011, 15:43

Почитай от таком понятии как z-index и все сразу станет на свои места

И еще, когда будешь использовать z-index размести свои элементы не вложено а по отдельности (хотя зависимости от твоих задач, вникать я не стал)

@Samazar · 13.12.2011, 15:46 **[ТС]**

z-index пытался использовать, но как-то все-равно не вышло то, что нужно. + если у меня используется рамка (именно рамка - середина блока пустая), то если объект не вложен, то не уверен, что будет overflow отрабатывать так, как нужно.

@ayrat_net · 13.12.2011, 15:53

Братко. перечитываю я твою тему уже третий раз и по прежнему понять не могу, чего ты хочешь добиться (картинка на картинке на картинке поверх рамка и при этом что-то там должно обрезаться). Если сформулируешь тему понятным языком, то почему бы и не помочь

Кстати, тебе следовало сразу дать понять, что смещение осуществляется посредством overflow

кстати интересен и еще один момент что ты подразумеваешь под обрезанием и какими средствами ты хочешь это выполнить, на данный момент это звучит как-будто бы ты используешь javascript или мне еще не известны все таинства CSS

@Samazar · 14.12.2011, 15:18 **[ТС]**

В дальнейшем, да, будет реализована поддержка JS. Пока-что делаю основу. Будет сделано что-то в духе баннера, т.е. Есть картинка, на которой изображена машина. На эту машину "наведен" планшет и внутри этого планшета отображается раскрашенная машина. Так как через JS планшет будет перемещаться, нужно что бы внутри него изображение так же перемещалось, что бы не получилось что 3 пара колес посреди кузова машины.

Сообщение от ayrat_net

Кстати, тебе следовало сразу дать понять, что смещение осуществляется посредством overflow

В смысле? На сколько помню, overflow: hidden; обрезает все, что выходит за рамки div'a при его ограниченных размерах

Добавлено через 23 часа 11 минут
Разобрался, что нужно реализовать - это что-то в духе лупы на JQuery. Но отличия следующие:
1) Сама "лупа" должна показываться постоянно
2) У "лупы" рамка нужна другого оформления (подставляется изображение).
3) нужно использовать два изображения. Нативное, которое будет выступать в роли уменьшенной копии и то, что будет отображаться в лупе - другое.

Порыскав по инету нашел только JQuery плагины, которые позволяют только третье. Никто не знает что-нибудь более подходящее?

Кстати, можно топик переместить в форум JQuery?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@ayrat_net 84 / 84 / 12 Регистрация: 12.01.2011 Сообщений: 1,049
	13.12.2011, 15:43
	Почитай от таком понятии как z-index и все сразу станет на свои места И еще, когда будешь использовать z-index размести свои элементы не вложено а по отдельности (хотя зависимости от твоих задач, вникать я не стал) 0

@Samazar 41 / 41 / 2 Регистрация: 02.11.2011 Сообщений: 193
	13.12.2011, 15:46 [ТС]
	z-index пытался использовать, но как-то все-равно не вышло то, что нужно. + если у меня используется рамка (именно рамка - середина блока пустая), то если объект не вложен, то не уверен, что будет overflow отрабатывать так, как нужно. 1

@ayrat_net 84 / 84 / 12 Регистрация: 12.01.2011 Сообщений: 1,049
	13.12.2011, 15:53
	Братко. перечитываю я твою тему уже третий раз и по прежнему понять не могу, чего ты хочешь добиться (картинка на картинке на картинке поверх рамка и при этом что-то там должно обрезаться). Если сформулируешь тему понятным языком, то почему бы и не помочь Кстати, тебе следовало сразу дать понять, что смещение осуществляется посредством overflow кстати интересен и еще один момент что ты подразумеваешь под обрезанием и какими средствами ты хочешь это выполнить, на данный момент это звучит как-будто бы ты используешь javascript или мне еще не известны все таинства CSS 0