이미지 불투명도의 특정 영역을 강조 표시하는 CSS 또는 JavaScript

like this을 (를) CSS 또는 JavaScript를 사용하여 찾고 있습니다.이미지 불투명도의 특정 영역을 강조 표시하는 CSS 또는 JavaScript

이미지의 특정 부분을 강조 표시해야하지만 찾은 모든 것이 Photoshop에서 수행하는 방법입니다. CSS 또는 JavaScript로이 작업을 수행 할 수 있습니까?

나는 올바른 질문을하고 있습니까?

편집 : 자, 여기

가 great submission입니다하지만 후속 질문이 있습니다

내가 좋아하는 모바일 장치와 가로 및 세로보기뿐만 아니라 많은 장치에 대한이 필요합니다 아이폰 OS, 아이 패드, 안드로이드, WebOS 등 ... 고정 위치는 잘 모르겠다.

어떤 조언이 필요합니까? 다음과 같이

출처

2011-02-25 Phill Pafford

당신은 절대 위치 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.

EDIT (OP 댓글에 대한 응답) : http://jsfiddle.net/zLazD/을 참조하십시오. 호버 측면을 껐습니다. 또한 국경을 추가했습니다.

CSS 변경 :

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

/* removed :hover section */

출처

2011-02-25 15:58:27

감사합니다. 그래, 나머지 부분은 더 밝지 만 투명하게 보이도록 이미지를 강조하고 싶습니다. 모바일 사이트 용으로 하나의 이미지가 필요하며로드 시간을 줄이려고합니다. –

hmm은 작동 할 예제를 얻을 수 없습니다. –

마지막 두 개가 가장 좋았을 때 처음 두 개를 편집했습니다. 포함 된 예제는 작업 예제에 대한 링크입니다. 제 예제에서 지역은 마우스를 올리면 강조 표시됩니다. –

물론입니다. 예를 들어, 대부분의 자르기 플러그인은 UI의 기초로서 "강조 표시"를 제공합니다. 따라서 완전한 크로스 브라우저 솔루션 인 경우 Jcrop과 같은 기존 플러그인을 사용하십시오.

물론 수정해야 할 수도 있습니다.이 경우 플러그인을 프로그래밍 방식으로 지정하여 강조 표시 할 섹션과 사용자가 이동할 수 없도록 설정 한 다음 강조 표시로 사용하도록 설정하면됩니다. 가위는 아니야.

출처

2011-02-25 16:01:44 davin

이들은 당신이 이미지의 일부를 강조하기 위해 취할 수있는 단계는 다음과 같습니다

액세스 자바 스크립트에서 이미지, 그리고 동적 후 다른 동일한 이미지를 바로 추가 할 수 있습니다. (이것은 HTML로만 할 수 있지만 마크 업의 의미를 변경합니다)
첫 번째 이미지 위에 두 번째 이미지 배치
두 번째 이미지에 CSS 마스크를 적용하여 "강조 표시된"부분 만 표시되도록합니다 위로
사용자가 이미지의 컨테이너를 가리키면 첫 번째 이미지의 불투명도를 조정하십시오.

필요할 경우 자세한 기술 정보를 제공 할 수 있습니다.

출처

2011-02-25 16:13:35 zzzzBov

당신이 할 수있는 아마 가짜는 여기에 예입니다 http://jsfiddle.net/erick/JMBFS/3/

내가 불투명 한 요소와 이미지를 포함했다. 요소의 색상은 이미지의 배경색과 동일합니다. 그것을 사용하기 위해 z-index를 사용했습니다.

출처

2011-02-25 16:25:48 erickb

이 방법이 마음에 들지만 다른 후속 질문이 있습니다. 모바일 장치 용입니다. 세로 및 가로보기 용으로 어떻게 코딩합니까? 그리고 iOS, iPad, Android 등의 여러 장치에서 사용할 수 있습니다. –

예제 코드에서 이미지는 HTML에 구현하는 한 방향에 관계없이 항상 왼쪽 위 모서리에 있어야합니다. 기본 iOS 또는 기본 Android 앱에서 작업하는 경우 해당 플랫폼에서 아직 작동하지 않아서 정말 도움이되지 않습니다. – erickb

이미지 불투명도의 특정 영역을 강조 표시하는 CSS 또는 JavaScript

답변

관련 문제