使用css给网站添加一个背景
4个月前
转载
超过130天
温馨提示
本文最后更新于2024年07月14日，已超过130天没有更新，若内容或图片失效，请留言反馈。
在这里也做了一些小优化，添加网站背景图片看起来不这么单调。
添加渐变背景
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 打赏
喜欢就打赏一点
下一篇
皮皮社博客
4个月前 . LV.2
你在不把你博客的图标居中对齐一下，我就要打你了。
寻梦xunm
4个月前 . LV.0
@皮皮社博客
为什么要居中呢？使用的图标本来就是歪的。
寻梦xunm
4个月前 . LV.0
@寻梦xunm
反正我不难受，嘿嘿，懒得搞。等哪天兴趣来了在搞
皮皮社博客
4个月前 . LV.2
@寻梦xunm
照顾下咱们这些星座的人吧！
