이미지 내의 CSS 불투명도

Question

불투명도 (선명한 이미지)와 나머지 불투명도로 이미지를 볼 수 있도록 내부 상자를 투명하게 만드는 가장 좋은 방법은 무엇입니까? 지금까지 내가 한 일입니다.

<style> 
#a { 
    background-color: black; 
    float: left; 
} #b { 
    opacity : 0.4; 
    filter: alpha(opacity=40); 
} #div { 
    position: absolute; 
    height: 30px; 
    width: 30px; 
    top: 90px; 
    left: 90px; 
    border: 1px solid #FFF; 
    background: transparent; 
} 
</style> 

<div id="a"> 
    <div id="b">  
    <img src="http://clagnut.com/images/ithaka.jpg" /> 
    </div> 
</div> 
<div id="div"></div> 

아이디어가 있으십니까? thx

Answer 1

요소의 최대 불투명도는 부모 요소의 불투명도입니다. 따라서 div # b의 불투명도가 40 % 인 경우 자녀의 스타일이 100 % 불투명 한 경우 불투명도는 40 %가됩니다.

당신이 묘사하고있는 것 (적어도 당신이 묘사하고 있다고 생각하는 것)을 달성하기 위해, 한 가지 방법은 투명한 래퍼와 상대 위치의 부모 div의 이미지 하위를 모두 가질 수 있습니다. 이미지가 투명 상자 위에 표시되도록 두 래퍼를 래퍼 내부에 배치 할 수 있습니다.

편집 : 다음은 설명하는 효과의 코드입니다. 내 예는 480 × 320 이미지를 가지고 있으며, 30 픽셀 경계 :

<style> 
    #back {background-image:url(mypicture.jpg); 
       width:480px; 
       height:320px; 
       position:relative;} 
    #middle {position:absolute; 
       width:480px; 
       height:320px; 
       background-color:#000; 
       opacity:0.4; 
       filter:alpha(opacity=40); 
       top:0; 
       left:0;} 
    #front {position:absolute; 
       width:420px; /* 30px border on left & right */ 
       height:260px; /* 30px border on top & bottom */ 
       background-image:url(mypicture.jpg); 
       background-position:-30px -30px; /* compensate for the border */ 
       top:30px; 
       left:30px;} 
</style> 

<div id="back"> 
    <div id="middle"> 
    </div> 
    <div id="front"> 
    </div> 
</div> 

Answer 2

내가 제대로 이해하는 경우 및 설정 (즉, ID "A"와 외부 하나를 제거) 하나의 사업부를 사용해보십시오 그 주위에 색깔있는 경계선이있다. 또는 왼쪽, 오른쪽, 위쪽 및 아래쪽 가장자리에 4 개의 div를 사용하고 모서리에 4 개의 테두리를 사용하여 테두리를 "가짜"로 만들면 더 많은 유연성을 얻을 수 있습니다.

예제 페이지가 없으면 무엇을 의미하는지 알기가 어렵습니다. 또는 예상 한 것과 실제로 얻은 것의 스크린 샷입니다.

편집 : 나는 Rex M이 썼던 것과 기본적으로 같은 것을 편집하려고합니다.

<style> 
#a { 
    float: left; 
    position: relative; 
} 
div.overlay { 
    opacity: 0.4; 
    background-color: black; 
    position: absolute; 
} 
#t { 
    left: 0; top: 0; height: 90px; width: 450px; 
} 
#b { 
    left: 0; top: 120px; height: 218px; width: 450px; 
} 
#l { 
    left: 0; top: 90px; height: 30px; width: 90px; 
} 
#r { 
    left: 120px; top: 90px; height: 30px; width: 330px; 
} 
</style> 
<div id="a"> 
    <div id="t" class="overlay"></div> 
    <div id="b" class="overlay"></div> 
    <div id="l" class="overlay"></div> 
    <div id="r" class="overlay"></div> 
    <img src="http://clagnut.com/images/ithaka.jpg"> 
</div> 

Answer 3

이 렉스 M이 불투명 요소가 투명의 아이들되지 않도록, 당신이 일을 변경해야합니다 말에 따르십시오 : 여기에 그것을 할 수있는 또 다른 (비록 이상적으로 열등한) 방법이있다 집단.

절대 또는 상대 위치 지정을 사용하면 "경계선"을 그림과 일렬로 정렬 할 수 있지만 브라우저간에 불일치가 종종 발생할 수 있습니다.

내 머리 꼭대기에서 가장 고통스럽지 않은 방법은 자바 스크립트를 사용하여 이미지의 상단 및 왼쪽 픽셀 위치를 얻고 테두리의 상단/왼쪽 CSS 속성을 설정하여 테두리 크기를 설정하는 것입니다 이미지의 그것까지).

는 UPDATE :

애 스커 그가 다시하려고 무엇의 예를 보여 주었다. 연결된 예제에서 그림의 음영 영역 ("선택되지 않음"영역)은 4div로 생성됩니다.

위쪽 및 아래쪽 div는 이미지의 전체 너비이며 선택 상자의 위쪽/아래쪽과 이미지의 위쪽/아래쪽의 차이만큼 높이가 설정됩니다.

사이드 div는 높이와 너비가 수정되어 이미지의 "측면 영역"을 채 웁니다.

크기는 mousemove 이벤트를 통해 업데이트됩니다.

Answer 4

당신은 이미지가 배경에 대 한 특정 색상을 가지고 있는지 확인하려면, 당신은 단지뿐만 아니라 스타일 시트에있는 모든 IMG 요소에 대한 배경 스틱 수 :

div#a img { background: #FFF; } 

여하튼는 필터 -을 CSS의 공식은 CSS 2.1의 공식 사양의 일부가 아니기 때문에 의존해서는 안됩니다.

나는 오해 할 수도 있습니다. 다시 말하거나 예상되는 결과를 제공 할 수 있습니까?