简单的页面背景设计（001）

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

/** 描述：顶部图片、底部图片、中间纯色* 效果：见文章中图片部分*/
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;
}

source: https://docs.ximinghui.org/4e1d7a904e.html

简单的页面背景设计（001）相关推荐

如何在页面插入一个跟随页面移动的盒子_word版面设计技巧：文档页面背景的设置方法...
编按:办公过程中,经常会使用Word制作各种各样的文档,有时会觉得空白的Word文档背景看起来实在是太单调乏味,这时候我们可以为文档添加一些背景元素,来美化文档.那么,接下来我就将教大家如何设置页面背 ...
微信小程序中这么简单的设置页面背景图及字体颜色的方法，你还不会？
在微信小程序中,我们不免的要设置背景图片和字体颜色. 那怎么样才能做到简单的设置背景图片和字体颜色呢? 话不多说,直接开讲首先先说怎么设置页面背景图片: 这是博主准备的照片. 下面是在wxml中的代 ...
十个简单好用的设计技巧[SM]
复杂的设计技巧总是很花时间,也实在是-.复杂 (-_-||). 高级效果为设计增色不少,但如果用得不对,只会影响用户对重点内容的关注.高级效果可能正好是一项好的设计的冲击力所在,但即便如此,也还是需 ...
figma设计_Figma中简单，可重复使用的设计系统
figma设计 Putting together a design system may seem like an unnecessary hassle. It's often easier to j ...
想要好看的设计？收下这份网页背景设计指南吧！
网页背景设计看似在整个网站的设计中处于一个不起眼的位置.实则,它对于用户的留存性及促进网站转化率方面都起到非常重要的作用.若是网页背景设计不合理,或者图片.色彩运用不当,对于用户而言都是视觉上的灾难. ...
【CSS】页面背景的毛玻璃效果
前言:最近学习到了一种超级好看,超级高级的背景设计效果,迫不及待的分享出来了适用情况:用图片做背景时,将弹框和背景融为一体一.基础设计(之前的实现方法) 页面很简单,在外层的div定义backgr ...
精通CSS.DIV网页样式与布局（四） ——页面背景
咱们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,他直接决定了整个网页的风格和色调.我们这回主要来学习如何用CSS来设置背景颜色.背景图片. 背景颜色:CSS设置背景颜 ...
精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
学生HTML个人网页作业作品 ~ 超级英雄11页面网页设计成品~ 学生网页设计作业源码
学生HTML个人网页作业作品 ~ 超级英雄11页面网页设计成品~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量 ...

简单的页面背景设计（001）

简单的页面背景设计（001）相关推荐

最新文章

热门文章