투명 원 프레임의 사각형 이미지

나는 직사각형 이미지를 가지고 있습니다. 나는 그것을 백그라운드에 놓고 빛의 투명성을 가진 원으로 본다.

2014-11-17 maytham-ɯɐɥʇʎɐɯ

질문에 포함 된 코드를 포함하십시오. –

"css transparent circle"을 검색하여 많은 결과를 얻었습니다. 첫 번째 [이 매우 비슷한 질문] (http://stackoverflow.com/questions/22332755/build-a-rectangle-frame-with-a-transparent-circle -using-css-only). 도움이 필요 하신가요? –

원하는대로 배경 이미지 위에 직사각형 이미지를 놓고 필요하다면 border-radius 및 z-index를 사용하면됩니다. – frajk

있습니까?

border-radius: 50%;을 img에 적용하면 원하는만큼 원을 얻을 수 있습니다.

.bg { 
 
    background-color: mediumaquamarine; 
 
    width: 500px; 
 
    height: 500px; 
 
    margin: auto 
 
} 
 
img { 
 
    border-radius: 50%; 
 
    /* Safari 3-4, iOS 1-3.2, Android 1.6- */ 
 
    -webkit-border-radius: 50%; 
 
    /* Firefox 1-3.6 */ 
 
    -moz-border-radius: 50%; 
 
    border: 1px solid red; 
 
    margin-left: 25%; 
 
    margin-top: 25%; 
 
    z-index: 1; 
 
    position: relative; 
 
    opacity: 0.8 
 
}

<div class="bg"> 
 
    <img src="http://placehold.it/250x250&text=Image" /> 
 
</div>

출처

2014-11-17 17:51:26 dippas

정확히 내가 게시 한 내용입니다. 오 사용자 – albert

무슨 뜻입니까 ??? – dippas

여기 수행하는 방법의 대략적인 데모입니다 : 당신의 PIX를 사용하여 http://jsfiddle.net/jalbertbowdenii/vfac6L4x/
, 그냥 단순히 img 요소에 대한 올바른 URL을 추가하고 마스크 컨테이너 사업부의 backgroudn 색상을 변경뿐만 아니라, 이미지의 경계 색.
유래이 필요하기 때문에 당신이 CSS 마스크
에 대한 더 많은 정보 검색을 원하는 경우이 당신을 위해 무엇을 찾고


.mask{background-color:#000} 
img{display:block; margin-left:auto; margin-right:auto; 
border-radius:25px; border:solid #000}

및 마크 업


<div class="mask"> 
    <img src="https://photos-6.dropbox.com/t/1/AAASULb1odiWJlk3dyEG-rF4B0baCCQ2D9aoTqXZiYZW6w/12/107220852/jpeg/1024x768/3/1416250800/0/2/trans-cirecle.jpg/VFul9uUE7QKOIrYKVNy58z9JzoOHj9UK3AGRUsSFbgY" /> 
</div>

출처

2014-11-17 17:50:26 albert

나는 그림 # 3의 결과 만 원한다고 생각합니다. – dippas

필자도 그 점을 추측했습니다. 그러나 pix은 그 자체로 제공되지 않았고, OP를 완벽하게 보여주기 위해 클립 경로를 사용할 수 있었지만 OP가 요구했던 방식이 아닙니다. 내 데모는 본질적으로 당신의 것이 주어진 사진을 사용하는 것입니다. – albert

@albert 나는 투표했습니다. 오랜 시간이되어서이 질문에 답할 수 있었지만, 나는 새로운 사용자 였고 투표 할 수 없었습니다. 나는 또한 내 능력을 향상 시켰습니다. –

이미지에 border-radius:50% 추가; img{}

의 값을 다양한 픽셀 값과 백분율 값으로 변경하면 더 많은 효과를 얻을 수 있습니다.

출처

2014-11-17 18:01:14 vishnu

투명 원 프레임의 사각형 이미지

답변

관련 문제