溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“如何利用CSS3創(chuàng)建三角背景圖像”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
直接上代碼：
<!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屬性設置圖片大小、background-repeat屬性設置不重復平鋪。
background-size指定背景圖片大小，當值設置為“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>），每一個坐標對代表多邊形的一個頂點坐標。瀏覽器會將最后一個頂點和第一個頂點連接得到一個封閉的多邊形。坐標對使用逗號來進行分隔，可以使用絕對單位或百分比單位值。
“如何利用CSS3創(chuàng)建三角背景圖像”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
