一、多背景
多背景写法:
背景尺寸: 设置背景图片的大小
◆通过background-size设置背景图片的大小
◆background-size的取值:
✔可以设置具体值
✔可以设置一个值,另外一个默认代表auto
✔可以设置预定义的值 cover
将背景图片按照缩放比例,将整个父容器沾满
✔可以设置预定的值 contain
将背景图片按照缩放比例,将整个背景图片完整的显示到容器中。
二、线性渐变
组成:开始颜色、结束颜色、渐变的方向、渐变的范围。
渐变的方向:
(1)◆to+ left | right | top | bottom |
(2)◆使用角度表示渐变的方向。 0deg 代表从下向上渐变, 90deg 代表从左向右渐变。
渐变的范围:
(1)◆渐变的范围使用百分比表示
(2)◆默认渐变范围相对父元素宽度
(3) ◆如果设置了background-size,那么渐变的范围是相对background-size设置的值
具体使用如下:
注意: ◆在渐变中首先要规定渐变的方向
其他示例如下:
角度设置渐变的方向:
渐变范围:
三、径向渐变
CSS基础知识汇总{主要内容:多背景及背景尺寸}
最新推荐文章于 2023-02-24 21:00:47 发布