使用css给网站添加一个背景
2个月前
转载
超过68天
温馨提示
本文最后更新于2024年07月14日，已超过68天没有更新，若内容或图片失效，请留言反馈。
在这里也做了一些小优化，添加网站背景图片看起来不这么单调。
添加渐变背景
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
本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。
0 赞
or 打赏
喜欢就打赏一点
下一篇
.png "往往免费的还不如收费的")
.png "走失两天的狗子终于找到它的家了")
.png "顶着三十几度的天气去钓鱼了")
.png "\"微博客\"一款自己开发自己用的垃圾源码（慢慢更新中）")
皮皮社博客
2个月前 . LV.1
你在不把你博客的图标居中对齐一下，我就要打你了。
寻梦xunm
2个月前 . LV.0
@皮皮社博客
为什么要居中呢？使用的图标本来就是歪的。
寻梦xunm
2个月前 . LV.0
@寻梦xunm
反正我不难受，嘿嘿，懒得搞。等哪天兴趣来了在搞
皮皮社博客
2个月前 . LV.1
@寻梦xunm
照顾下咱们这些星座的人吧！
