这是我参与「第四届青训营 」笔记创作活动的的第八天
写在前面
以下是我学习CSS过程中的一些CSS的学习笔记记录,主要目的是用于巩固基础知识,方便日后的回看复习。本节内容主要包含CSS里的背景的一些相关知识。
背景
- 背景颜色
- 顾名思义,用来设置网页的背景颜色,默认值是
transparent,即为透明 - 属性名:
background-color
- 顾名思义,用来设置网页的背景颜色,默认值是
- 背景图片
- 除了可以设置网页背景变成纯颜色样式外,还能添加图片作为网页的背景
- 属性名:
background-image
- 背景平铺
- 即定义背景图像的显示形式,例如一张图片的实际大小比网页显示面积小,决定是让图片被复制黏贴后平铺在网页上,还是让图片等比放大占满整个网页
- 属性名:
background-repeat - 属性值:
属性值 作用 repeat 背景图片在纵横上平铺(默认) no-repeat 背景图片不平铺 repeat-x 背景图片在横向上平铺 repeat-y 背景图像在纵向平铺 - 背景位置
- 设置背景图片位于网页哪个位置上
- 属性名:
background-position - 属性值:
属性值 描述 length 百分数或者由浮点数和单位组成的长度值 position top | center | bottom | left | center | right - 背景固定
- 场景描述:当我们将网页往下滑时,网页背景不与网页内容一齐往下滑,这便是背景固定
- 属性名:
background-attachment - 属性值:
属性值 作用 scroll 背景图像随内容滚动 fixed 背景图像固定 - 背景属性复合
- 将背景的属性值结合在一起写,简化代码
- 代码格式:
background: 背景颜色 背景图片url 背景平铺 背景图像滚动 背景图片位置 - 背景半透明
- 让背景变成半透明的
- 代码:
background: rgba(0,0,0,透明度且值由0到1);
写在最后
以上便是我的一些学习笔记,若有不足,欢迎指出