当前位置:首页 > 网站应用 > 正文内容

简约漂亮的网页背景渐变特效CSS

cjw1232年前 (2023-10-21)网站应用3290

渐变色背景的应用在各种网页制作、u设计是非常普遍的,分享的这套渐变背景简约大气,颜色配比很灵活,给人舒适感。

<style>
body {
	background-image:radial-gradient(rgba(255,0,0,0.3),rgba(255,0,0,0) 40vw),radial-gradient(rgba(0,128,0,0.3),rgba(0,128,0,0) 40vw),radial-gradient(rgba(0,0,255,0.3),rgba(0,0,255,0) 40vw),radial-gradient(rgba(255,255,0,0.3),rgba(255,255,0,0) 40vw),radial-gradient(rgba(255,0,0,0.3),rgba(255,0,0,0) 40vw);
	background-position:-40vw 14rem,50% 10rem,60vw 14rem,-10vw calc(14rem + 20vw),30vw calc(14rem + 20vw);
	background-size:80vw 80vw
}
</style>
<div class="body"></div>


扫描二维码推送至手机访问。

版权声明:本文由追求完美发布,如需转载请注明出处。

本文链接:https://cjw123.com/blog/?id=15

分享给朋友:

相关文章

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型,可以规定meta标签所在的html页面是否被蜘蛛抓取,下面是这个meta标签的用法,大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot...

8 种在 CSS 中隐藏元素的方法汇总

作为 Web 开发人员,我们经常遇到需要隐藏网页上的元素的情况。在本文中,我们将分享8 种在 CSS 中隐藏元素的方法,每种方法都有优点和注意事项。1.Opacity and Filter: Opacity隐藏元素最简单的方法之一是调整其不透明度。opacity 属性允许我们通过将其值设置为 0 来...

css3实现不断旋转动画加载,并弹性布局显示

<style> body{ background:#34495e; display:flex; justify-content:center; align-items:center; height:100vh; } .loading{ position:relative...

zblogphp二级目录建站,伪静态规则怎么写

如果你的 Z-BlogPHP 站点安装在二级目录中,需要使用伪静态技术来优化站点的 URL,并提升搜索引擎蜘蛛的抓取效率。下面是一个 nginx 的伪静态规则示例:# 子目录规则要排在前边; location /sub/ {    &n...

网站js防扒代码-禁止右键/F12/调试自动关闭窗口

非常暴力。宣称可以禁用所有一切可以进入开发者工具的方法,防止通过开发者工具进行的 "代码搬运"1.效果演示演示站以及原文地址:https://theajack.github.io/disable-devtool/说明:此法较为非常j狠。宣称可以禁用所有一切可以进入开发者工具的方法...

摇摆的灯光

点击运行看演示效果!<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。