CSS или JavaScript для выделения определенной области непрозрачности изображения - PullRequest
Новая
       30

CSS или JavaScript для выделения определенной области непрозрачности изображения

3 голосов
/ 25 февраля 2011

Я хочу сделать что-то , как это , но с помощью CSS или JavaScript.

Мне нужно выделить определенную часть изображения, но все, что я нахожу, это как сделать это вPhotoshop.Могу ли я сделать это с помощью CSS или, может быть, JavaScript?

Я даже задаю правильный вопрос?

РЕДАКТИРОВАТЬ:

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

Мне нужно это для мобильного устройства и портрета игоризонтальные виды также для многих устройств, таких как: iOS, iPad, Android, WebOS, Etc ... Так что фиксированная позиция, я не уверен, сработает.

Любой совет?

Ответы [ 4 ]

5 голосов
/ 25 февраля 2011

Вы можете использовать background-position с абсолютно позиционированными элементами div следующим образом:

CSS: 

.container {
    position:relative;
    height:455px;
    width:606px;
}

.container div {
    position:absolute;
    background-image:url(http://www.beachphotos.cn/wp-content/uploads/2010/07/indoensianbeach.jpg);
}

.container .bg-image {
    opacity:0.3;
    height:455px;
    width:606px;
}

.container div.highlight-region {
    height:50px;
    width:50px;
    opacity:0;
}

.container div.highlight-region:hover {
    opacity:1;
}

HTML: 

<div class="container">
    <div class="bg-image"></div>
    <div class="highlight-region" style="top:50px;left:50px;background-position: -50px -50px;"></div>
    <div class="highlight-region" style="top:150px;left:150px;background-position: -150px -150px;"></div>
</div>

Пожалуйста, см. http://jsfiddle.net/MT4T7/ для примера

Благодарим пользователя beachphotos.com за использование их изображения.

РЕДАКТИРОВАТЬ (ответ на комментарий OP): См. Также http://jsfiddle.net/zLazD/ Я отключил аспект при наведении. также добавлены некоторые границы.

Изменения CSS: 

.container div.highlight-region {
    height:50px;
    width:50px;
    border: 3px solid white;
}

/* removed :hover section */
1 голос
/ 25 февраля 2011

Вы, вероятно, можете подделать его, вот пример: http://jsfiddle.net/erick/JMBFS/3/

Я накрыл изображение непрозрачным элементом.Цвет элемента совпадает с фоном изображения.Использовал z-index, чтобы поставить его сверху.

0 голосов
/ 25 февраля 2011

Вот шаги, которые вы можете предпринять, чтобы выделить часть изображения:

  1. Доступ к изображению в JavaScript и динамическое добавление другого идентичного изображения сразу после него. (это можно сделать только в HTML, но это изменит семантику вашей разметки)
  2. Поместите второе изображение поверх первого изображения
  3. Применить маску CSS ко второму изображению, чтобы отображалась только «выделенная» часть
  4. Когда пользователь наводит курсор на контейнер изображений, настройте непрозрачность первого изображения.

Я могу предоставить более подробную техническую информацию по этому вопросу позже, если потребуется.

0 голосов
/ 25 февраля 2011

Ты уверен, что можешь. Например, большинство плагинов для обрезки обеспечивают «подсветку» в качестве основы их пользовательского интерфейса. Так что для полного кросс-браузерного решения просто используйте существующий плагин, например Jcrop .

Конечно, вы можете захотеть, чтобы это было исправлено, и в этом случае вы можете программно сообщить плагину, какой раздел выделить, и что пользователь не сможет его переместить, и тогда он будет действовать как маркер, а не кроппер.

...