利用CSS3創造酷炫的三角背景影像-css教學-PHP中文網

利用CSS3創造酷炫的三角背景影像

青灯夜游

發布： 2021-08-23 12:05:44

原創

2430 人瀏覽過

如何讓你的網頁更吸引眼球，更有高級感？一個好看的背景是不可缺少的！以下這篇文章就來分享一種利用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/611f69e8a300f34利用CSS3創造酷炫的三角背景影像");
  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>

登入後複製

#然後分別給這兩個div使用
background-image屬性新增背景圖片，並使用background-size屬性設定圖片大小、background-repeat屬性設定不重複平鋪。
- background-size指定背景圖片大小，當值設為「
  cover」時，將保持影像的縱橫比並將影像縮放成將完全覆蓋背景定位區域的最小大小。
最後給第二個
div使用clip-path屬性畫出三角形。

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

登入後複製

clip-path是css3的新屬性，意義裁切路徑的意思，讓我們可以很便捷的產生各種幾何圖形。 clip-path 透過定義特殊的路徑，實現我們想要的圖形。而這個路徑，正是 SVG 中的 path 。
polygon()函數：用來定義一個多邊形，也可以用來剪裁圖形。它的參數是一組座標對（），每一個座標對代表多邊形的一個頂點座標。瀏覽器會將最後一個頂點和第一個頂點連接得到一個封閉的多邊形。座標對使用逗號來進行分隔，可以使用絕對單位或百分比單位值。

css影片教學》！

以上是利用CSS3創造酷炫的三角背景影像的詳細內容。更多資訊請關注PHP中文網其他相關文章！