배경 이미지 자르기 방법

사용자 지정 양식으로 배경 이미지를 잘라내려고합니다.배경 이미지 자르기 방법

목표는이 같은 작물 이미지입니다 : 그것처럼 모든 단계의 enter image description here

생각해 다른 HTML 페이지 (페이지-1.html, 페이지 2.html, 페이지 3.html)입니다.

페이지 -1.html의 배경은 매우 간단합니다. 중요한 것은 인정하는 것입니다 -이 그림은 반응 적이어야합니다.

background-image: url(image-1.jpg) no-repeat 50% 0; 
background-size: cover;

번째 예

page-1.html

<svg>는 요소를 사용하여 수행 할 수있다.

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="200" viewBox="0 0 100 102" preserveAspectRatio="none" class="triangle-svg"> 
    <path d="M0 100 L50 0 L100 100 Z"></path> 
</svg> 

<style> 
    .triangle-svg { 
     position: absolute; 
     left: 0; 
     right: 0; 
     top: auto; 
     bottom: 0; 
     z-index: 999; 
     fill: #fff; 
    } 
</style>

그러나 세 번째 예에 대한 page-2.html? 나는 그것을 다루는 방법을 모른다. .top-layout 이미지가 croped 수 있어야

<div class='top-layout'></div> 
<div class='bottom-layout'></div>

: 3 예에서 우리는 같은 것을 참조하십시오. <svg> 결정은 우리가 두 번째 이미지를 가장 먼저 넣을 수 있어야하기 때문에 나쁘다.

.top-layout { 
    height: 500px; 
} 
.bottom-layout { 
    height: 500px; 
    position: relative; 
    top: -150px; 
}

그리고이 모든 것들은 background-size: conver 효과로 반응해야합니다.

누구든지이 문제를 해결할 수 있다면? 감사합니다

출처

2014-09-25 user2573863

캔버스가 더 좋은 옵션이 될 것입니다. – Shadow

실제 예제를 제공 할 수 있습니까? – user2573863

매우 넓은 친구입니다. HTML5 캔버스에서 클리핑 이미지를 공부해야합니다. – Shadow

@phrogz는 그가 처음 대답 한 이후로 모든 크레딧을받을 자격이 있습니다.

데모가 clip-path, mask and gradient입니다. 솔루션의 경우 그룹 <g clip-path="url(#clip-bottom)" > ... </g>의 내용을 자신의 <image .... clip-path="url(#clip-bottom)" />으로 바꿉니다. 보통 image 태그를 깨끗하게 유지하려면 clip-path으로 g 전화 번호부를 만들 겠지만, 그것은 내 자신의 취향입니다.

출처

2014-09-25 18:49:20

배경 이미지 자르기 방법

답변

관련 문제