站長資訊網(wǎng)如何讓你的網(wǎng)頁更吸引眼球，更有高級感？一個好看的背景是不可缺少的！下面本篇文章就來分享一種利用CSS3創(chuàng)建炫酷的三角背景圖像的小技巧，讓你的網(wǎng)頁兼美麗與實用于一體~
正如標題所言我們今天主要帶大家了解使用CSS3創(chuàng)建炫酷的三角背景的方法，這在我們想展示某些完全不同的選擇（例如白天和黑夜或冬天和夏天）時非常有用。
下面我們就先直接上代碼：
<!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/611f69e8a300f343.jpg"); 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>
效果如下圖所示：
怎么樣！效果是不是很棒！
下面我們來分析一下上面的代碼：
-
首先創(chuàng)建兩個div
<body> <div class="day"></div> <div class="night"></div> </body>
-
然后分別給這兩個div使用
background-image屬性添加背景圖片，并使用background-size屬性設(shè)置圖片大小、background-repeat屬性設(shè)置不重復(fù)平鋪。-
background-size指定背景圖片大小，當值設(shè)置為“
cover”時，將保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。
-
-
最后給第二個
div使用clip-path屬性畫出三角形。
clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
-
clip-path是css3的一個新屬性，意味裁剪路徑的意思，讓我們可以很便捷的生成各種幾何圖形。clip-path 通過定義特殊的路徑，實現(xiàn)我們想要的圖形。而這個路徑，正是 SVG 中的 path 。
-
polygon()函數(shù)：用于定義一個多邊形，也可以用來剪裁圖形。它的參數(shù)是一組坐標對（<shape-arg> <shape-arg>），每一個坐標對代表多邊形的一個頂點坐標。瀏覽器會將最后一個頂點和第一個頂點連接得到一個封閉的多邊形。坐標對使用逗號來進行分隔，可以使用絕對單位或百分比單位值。
PHP中文網(wǎng)平臺有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》！
