이미지 배경으로 단면 CSS3 기울이기 변형 효과를 어떻게 만들 수 있나요?

한쪽의 기울이기 변형

이미지를 배경으로 사용할 때 "CSS3 Transform Skew One Side" 효과를 만드는 것은 어려운 일입니다. 단색 대신. 제공된 솔루션은 그라데이션을 사용하여 시연하지만 이미지를 활용하려는 사용자에게는 적합하지 않을 수 있습니다.

기울어진 이미지 배경에 대한 솔루션

원하는 효과를 얻으려면 이미지 배경이 있는 경우 다음 접근 방식을 고려하세요.

• 부모 Div: 이미지가 포함된 상위 div에 기울이기 변환을 적용합니다. 예를 들어 20도 기울이기가 적용되는 경우 CSS 코드는 다음과 같을 수 있습니다.

#parallelogram {
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
}

• 이미지용 중첩 Div: 상위 div를 비뚤게 만들고 이 div 내에 이미지를 배치합니다. 이 중첩된 div는 이미지를 왜곡하지 않는 역할을 합니다. 아래 예에서는 상위 div의 기울어짐에 대응하기 위해 중첩된 div에 -20deg의 기울어짐이 적용됩니다.

.image {
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}

반대 기울어짐 값이 있는 중첩된 div를 사용하면 다음을 수행할 수 있습니다. 기울어진 부분의 투명성을 유지하면서 한쪽에 기울어진 효과를 효과적으로 얻을 수 있습니다. 이 기술은 아래 예제 코드에서 보여줍니다.

<div class="container">
  <div></div>
</div>

위 내용은 이미지 배경으로 단면 CSS3 기울이기 변형 효과를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!