利用CSS3创建炫酷的三角背景图像
导读:收集整理的这篇文章主要介绍了利用CSS3创建炫酷的三角背景图像,觉得挺不错的,现在分享给大家,也给大家做个参考。如何让你的网页更吸引眼球,更有高级感?一个好看的背景是不可缺少的!下面本篇文章就来分享一种利用CSS3创建炫酷的三角背景图像的小...
收集整理的这篇文章主要介绍了利用CSS3创建炫酷的三角背景图像,觉得挺不错的,现在分享给大家,也给大家做个参考。如何让你的网页更吸引眼球,更有高级感?一个好看的背景是不可缺少的!下面本篇文章就来分享一种利用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.js-code.COM/upload/article/000/000/024/611f69e8a300f343.jpg"); background-size: cover; background-repeat: no-repeat; } .night { background-image: url("https://img.js-code.com/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()函数:用于定义一个多边形,也可以用来剪裁图形。它的参数是一组坐标对(Shape-arg> shape-arg> ),每一个坐标对代表多边形的一个顶点坐标。浏览器会将最后一个顶点和第一个顶点连接得到一个封闭的多边形。坐标对使用逗号来进行分隔,可以使用绝对单位或百分比单位值。
PHP中文网平台有非常多的视频教学资源,欢迎大家学习《css视频教程》!
以上就是利用CSS3创建炫酷的三角背景图像的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 利用CSS3创建炫酷的三角背景图像
本文地址: https://pptw.com/jishu/589575.html