클립 이미지 배경/둥근 모서리 CSS 만

웹 사이트 디자인에 한 부분이 있습니다. 구현 방법을 잘 모르겠습니다.클립 이미지 배경/둥근 모서리 CSS 만

이것은 페이지의 일부입니다. 콘텐츠가 가이드 라인 (부트 스트랩 그리드)에 따라 표시 될 위치를 확인할 수 있습니다. 그리고 가장 중요한 부분은 아래쪽과 위쪽에 둥근 테두리가 있습니다.

나는 border 속성을 재생하려고했지만, 결과를 원하는 가져올 수 없습니다.

현대적인 브라우저를 사용하지 않고 CSS, 를 사용하여 다음과 같은 효과를 얻을 수있는 방법이 있습니까 모바일 브라우저를 지원하기 위해, 클립, 캔버스 ... 같은 기능.
또는 이미 그래픽 편집기에서 적절한 모양으로 배경을 내보낼 수있는 유일한 방법은 무엇입니까?

나는 도움을 주셔서 감사합니다.

출처

2016-09-07 CROSP

가장 쉬운 해결책은 투명한 배경으로 이미지를 만들 수 있습니다. –

이미 모양이 설정된 이미지를 의미합니까? – CROSP

예. 그것은 아마도 모든 사람들이 갈 수있는 가장 쉬운 방법 일 것입니다. –

이 내가 얻을 수있는 가장 가까운 :

div { 
 
    position:absolute; 
 
    left:40px; 
 
    top:40px; 
 
    width:500px; 
 
    height:300px; 
 
    border-radius:100%/20px; 
 
    background: blue url(https://placeimg.com/500/300/any); 
 
}

<div></div>

출처

2016-09-07 08:04:14

답변을 주셔서 감사합니다. 'border-radius'가 백분율과 픽셀을 사용하여 계산되는 방법을 설명해 주시겠습니까? (이 경우 100 %)? 그리고이 방법은 여러 브라우저에서 얼마나 잘 지원됩니까? – CROSP

클립 이미지 배경/둥근 모서리 CSS 만

답변

관련 문제