使用css给网站添加一个背景
1年前
转载
超过477天 温馨提示
本文最后更新于2024年07月14日，已超过477天没有更新，若内容或图片失效，请留言反馈。
在这里也做了一些小优化，添加网站背景图片看起来不这么单调。
添加渐变背景
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -520;
pointer-events: none;
}
body::before {
background: linear-gradient( 90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1)); /*背景颜色*/
}
添加背景图片
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -520;
pointer-events: none;
}
body::before {
background-image: url(/img/1.avif);/* 这里设置图片 */
background-repeat: no-repeat;
background-size: cover;
}
添加动态渐变背景
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -520;
pointer-events: none;
}
body::before {
background: linear-gradient( 90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1)); /*背景颜色*/
background-size: 500%;
animation: bgAnimation 15s linear infinite; /*执行动画*/
}
@keyframes bgAnimation{
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
文章来源于：https://www.jinjun.top/465.html
none
本站相关资源来自互联网用户收集发布，仅供用于学习和交流。 如有侵权之处，请联系站长并出示相关证明以便删除，敬请谅解！
0 赞 or 打赏 
喜欢就打赏一点
下一篇
皮皮社博客
1年前 . 贵人 . LV.4
你在不把你博客的图标居中对齐一下，我就要打你了。
寻梦xunm 作者博主
1年前 . 贵人 . LV.6
@皮皮社博客
为什么要居中呢？使用的图标本来就是歪的。
皮皮社博客
1年前 . 贵人 . LV.4
@寻梦xunm
照顾下咱们这些星座的人吧！
寻梦xunm 作者博主
1年前 . 贵人 . LV.6
@皮皮社博客
反正我不难受，嘿嘿，懒得搞。等哪天兴趣来了在搞