简单的页面背景设计（001）-CSDN博客

本文链接：https://blog.csdn.net/m0_72259926/article/details/128290625

简单记录一下样式设计，方面下次遇到这种场景时可以直接照搬。内容为自己个人理解，非前端开发人员，也没有去看文档，所以可能存在错误。

/*
 * 描述：顶部图片、底部图片、中间纯色
 * 效果：见文章中图片部分
 */
div {
    /* 指定多张背景图片的URL：这里需要2张 */
    background-image: url(../assets/images/top-background.png), url(../assets/images/bottom-background.jpg);
    /* 两张图片的位置分别为顶部和底部：有多种位置可选，比如右下（right bottom）等 */
    background-position: top, bottom;
    /* 背景大小：contain为包含的意思，看起来像是把图片按比例拉伸至容器宽度或高度（个人理解，没去看文档，不确定） */
    background-size: contain;
    /* 背景填充方式：no-repeat为不重复的意思，还有别的方式，比如重复平铺等 */
    background-repeat: no-repeat, no-repeat;
    /* 背景色：即使有背景图片依然可以再设置背景色，但是不要使用【background: #fff】方式设置背景色，这样会覆盖背景图等样式，而是使用更精确的background-color来设置背景色 */
    background-color: #2677fa;
    /* 高度占据一屏，可简单理解为100%。若div中没有任何内容(即html元素)，则高度默认为0，即看不到背景图片（背景图片不会撑开元素高度）。这里设置的是100vh，即固定了div的高度，若是需要高度至少为一屏（即100%），当元素中内容超过一屏时div会跟着被撑开（即高于1屏的高度，页面可以往下滚动），请将这里的【height: 100vh】替换为【min-height: 100vh】 */
    height: 100vh;
}