HTML5/CSS에서 이미지의 특정 부분을 투명하게 만들 수 있습니까?

Question

내 페이지에 투명하지만 특정 부분이있는 이미지를 갖고 싶습니다. 이미지/div의 특정 부분을 투명하게 만들 수 있습니까? 예를 들어, 오른쪽 아래 모서리의 원 또는 오른쪽 상단 부분?

Answer 1

다른 CSS 옵션입니다. 배경 크기가 고정 된 배경을 공유하여 이미지 내의 투명한 영역을 시뮬레이션합니다. 배경 인 및 원형 모두를 커버합니다. div의, 헤더, 단락과 같은 배경을 가질 수 있습니다 다른 HTML 요소를 사용하는 경우이 기술은 ...

JSFiddle

홈페이지 CSS

.main-background, .circle-div { 
    background-image:url(http://i.imgur.com/1aAo20a.jpg); 
    background-repeat:no-repeat; 
    background-position:center top; 
    background-attachment:fixed; 
    background-size:cover; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
} 

HTML

<div class="main-background"> 
    <div class="demo-holder"> 
     <img class="img-size" src="http://i.imgur.com/OaE8VAj.jpg" /> 
     <div class="circle-div">Transparent<br />Effect</div> 
    </div> 
</div> 

을 재미있는 효과를 생성

"데모 홀더"의 배경으로 인라인 이미지를 사용하는 것이 좋습니다.

Answer 2

DEMO

확인이 데모는, 당신은 span 태그를 추가 할 불투명도를 추가 절대 위치를 제공 할 수 있습니다. 또한 불투명도를 높일 수 있습니다. 희망하는 제품입니다. :)

HTML :

<div class="imgWrap"> 
    <img src="https://www.google.co.in/images/srpr/logo11w.png" /> 
    <span class="tranparentClass"></span> 
</div> 

CSS : 여기

.imgWrap img{ 
    width:80%; 
    height:80%; 
    position:relative; 
    border:1px solid #900; 
} 
.tranparentClass { 
    opacity:.5; 
    border:1px solid #f00; 
    border-radius : 50%; 
    display:block; 
    padding:55px; 
    position:absolute; 
    top:0; 
    left:0; 
    background:#fff; 

}