집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3를 사용하여 멋진 삼각형 배경 이미지 만들기

CSS3를 사용하여 멋진 삼각형 배경 이미지 만들기

青灯夜游원래의: 2021-08-20 17:10:332493검색

웹페이지를 더욱 눈길을 끌고 고급스럽게 만드는 방법은 무엇입니까? 멋진 배경은 필수입니다! 다음 기사에서는 CSS3를 사용하여 멋진 삼각형 배경 이미지를 만드는 방법을 공유하여 웹페이지를 아름답고 실용적으로 만들 수 있습니다~

제목에서 알 수 있듯이 오늘은 CSS3를 사용하여 멋진 배경을 만드는 방법을 주로 보여 드리겠습니다. 이미지 삼각형 배경 방법은 낮과 밤, 겨울과 여름 등 완전히 다른 옵션을 표시하려는 경우에 유용합니다.

코드부터 직접 시작해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  height: 100vh;
  width: 100vw;
}

.day {
  background-image: url("https://img.php.cn/upload/article/000/000/024/611f69e8a300f34CSS3를 사용하여 멋진 삼각형 배경 이미지 만들기");
  background-size: cover;
  background-repeat: no-repeat;
}

.night {
  background-image: url("https://img.php.cn/upload/article/000/000/024/611f6a067f909111.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}
</style>
</head>
<body>
  <div class="day"></div>
  <div class="night"></div>
</body>
</script>
</body>
</html>

효과는 아래와 같습니다.

CSS3를 사용하여 멋진 삼각형 배경 이미지 만들기

어때요! 효과가 대단하지 않나요!

위의 코드를 분석해 보겠습니다.

먼저 두 개의 div를 만듭니다

<body>
  <div class="day"></div>
  <div class="night"></div>
</body>

그런 다음 background-image 속성을 사용하여 이 두 div에 각각 배경 이미지를 추가합니다. background-size 속성은 이미지 크기를 설정하고 background-repeat 속성은 반복되지 않는 타일링을 설정합니다.
background-image属性添加背景图片，并使用background-size属性设置图片大小、background-repeat属性设置不重复平铺。
- background-size指定背景图片大小，当值设置为“cover”时，将保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
最后给第二个div使用clip-path

배경 크기는 배경 이미지의 크기를 지정합니다. 값이 "cover"로 설정되면 이미지의 가로 세로 비율이 유지되고 이미지가 확대됩니다. 배경 위치 지정 영역을 완전히 덮도록 크기가 조정되었습니다.

마지막으로 clip-path 속성을 사용하여 두 번째 div에 대한 삼각형을 그립니다.

 clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);

clip-path는 css3의 새로운 속성으로, 클리핑 패스(clipping path)를 뜻하며, 다양한 기하학적 도형을 쉽게 생성할 수 있게 해줍니다. Clip-path는 특수 경로를 정의하여 우리가 원하는 그래픽을 얻습니다. 그리고 이 경로는 정확히 SVG의 경로입니다.

🎜🎜polygon() 함수: 다각형을 정의하는 데 사용되며 그래픽을 자르는 데에도 사용할 수 있습니다. 그 매개변수는 좌표 쌍 세트(

)이며, 각 좌표 쌍은 다각형의 정점 좌표를 나타냅니다. 브라우저는 마지막 정점을 첫 번째 정점에 연결하여 닫힌 다각형을 형성합니다. 좌표 쌍은 쉼표로 구분되며 절대 또는 백분율 단위 값을 사용할 수 있습니다. 🎜🎜🎜🎜PHP 중국어 웹사이트 플랫폼에는 "🎜css 비디오 튜토리얼🎜"을 배우는 것을 환영합니다! 🎜

위 내용은 CSS3를 사용하여 멋진 삼각형 배경 이미지 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS를 사용하여 텍스트에 불꽃 효과를 추가하는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).다음 기사：CSS를 사용하여 텍스트에 불꽃 효과를 추가하는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).