子比美化|设置网站背景

子比美化|设置网站背景

该教程来源于老唐,本人只是稍加搬运一下

图片版

进入主题设置->全局&功能->自定义代码

将以下代码中的图片地址修改为你的图片地址后,保存到自定义CSS样式

/***日间主题模式***/body {
    background-image: url("https://aaaaaa.com/aaa.jpg");/**这里改为你自己的图片地址**/    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/***夜间主题模式***/.dark-theme {
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("https://aaaaaa.com/bbb.jpg");/**这里改为你自己的图片地址**/    background-size: cover;
}

需要注意的是,网站背景图片的色调,亮度等都需要和整体颜色相互配合才能达到较好的效果,背景太花哨或者颜色不合适都只会让网站变得很丑!

CSS渐变色

上面老唐给的教程是使用图片,使用图片的话难免要考虑尺寸,尤其是移动端的尺寸,处理不好就很丑,况且使用图片作为网站背景的话还容易拖累网站速度。

这里就比较推荐大家使用背景渐变色。

春天的温暖

background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);

尘埃的草

background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

网上一搜其实有很多,我使用的是下列一个网站的代码,很多还免费,很推荐!

免费的渐变背景CSS3样式 | oulu.me (pxlab.cn)

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容