如何让你的网页更吸引眼球，更有高级感？一个好看的背景是不可缺少的！下面本篇文章就来分享一种利用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/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>效果如下图所示：
怎么样！效果是不是很棒！
下面我们来分析一下上面的代码：
首先创建两个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()函数：用于定义一个多边形，也可以用来剪裁图形。它的参数是一组坐标对（4acc13954079a0c0b9ddd65254c89fff 4acc13954079a0c0b9ddd65254c89fff），每一个坐标对代表多边形的一个顶点坐标。浏览器会将最后一个顶点和第一个顶点连接得到一个封闭的多边形。坐标对使用逗号来进行分隔，可以使用绝对单位或百分比单位值。
PHP中文网平台有非常多的视频教学资源，欢迎大家学习《css视频教程》！
以上是利用CSS3创建炫酷的三角背景图像的详细内容。更多信息请关注PHP中文网其他相关文章！
两个图像和一个API：我们重新着色产品所需的一切Apr 15, 2025 am 11:27 AM我最近找到了一种动态更新任何产品图像的颜色的解决方案。因此，只有一种产品之一，我们可以以不同的方式对其进行着色以显示
每周平台新闻：第三方代码，被动混合内容，连接最慢的国家的影响Apr 15, 2025 am 11:19 AM在本周的综述中，灯塔在第三方脚本上阐明了灯光，不安全的资源将在安全站点上被阻止，许多国家连接速度
托管您自己的非JavaScript分析的选项Apr 15, 2025 am 11:09 AM有很多分析平台可帮助您跟踪网站上的访问者和使用数据。也许最著名的是Google Analytics（广泛使用）
它全部都在头上：管理带有React头盔的React Power Site的文档头Apr 15, 2025 am 11:01 AM文档负责人可能不是网站上最迷人的部分，但是其中所处的内容对于您的网站的成功也一样重要
JavaScript中的Super（）是什么？Apr 15, 2025 am 10:59 AM当您看到一些称为super（）的JavaScript时，在子类中，您会使用super（）调用其父母的构造函数和超级。访问它的
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中
SublimeText3汉化版
中文版，非常好用
螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
