原生CSS常用背景属性与文本内容颜色取值说明

CSS常用的声明属性与其属性值

背景类

1.1background-image ：url("") 背景图引用路径

url可以引用多张图片，每张图片用逗号隔开

1.2background-image:linear-gradient() 背景色渐变色（线性渐变）

background-image: linear-gradient(to right bottom, skyblue, yellow 40px,red 80px);

1.2.1 background-image:repeating-linear-gradient() 背景色线性渐变且平铺

background-image:repeating-linear-gradient(to right, rgba(27, 163, 216, 0.863), rgba(223, 201, 187, 0.5) 50px);

第一个参数是方向，第二个参数及以后是颜色

  background-image: linear-gradient(to right bottom, skyblue, yellow);

1.3.1背景色径向渐变（即：以中心点渐变，建议配合平铺使用）

    background-image: radial-gradient(rgba(59, 15, 139, 0.911) 5%, rgba(0, 0, 0, 0.5) 30%);

1.3.2背景色径向渐变且平铺：

background-image: repeating-radial-gradient(rgba(59, 15, 139, 0.911) 5%, rgba(0, 0, 0, 0.5) 30%);

2.background-color 背景色

取值：关键字、rgb、rgba、

3.background-position 背景图位置

取值：第一个值是X轴方向位置或者偏移量，第二个值是Y轴方向位置或者偏移量

取值范围：四个方向、居中（center）、像素值（px）

4.background-repeat 背景图平铺方式

取值： repeat 平铺（默认） 图片尺寸小于标签的尺寸

​ no-repeat 不平铺

​ repeat -x x轴方向平铺

​ repeat -y y轴方向平铺

让一张背景图在元素中间位置居中：

background-repeat: no-repeat;
background-position: center center;

5.background-size 设置背景图片的大小

不设置background-size时，背景图是原始尺寸

取2个值：第一个值是宽度，第二个值是高度

取1个值：这个值是宽度，高度是图片的原始尺寸

6.background-clip 设置背景的显示区域

取值：三个子盒子

7.background-origin 设置背景的渲染区域

同上

8.background-attachment 设置背景定位

常用取值：固定定位（fixed）

所有背景样式一行简写：

background: bule url("") no-repeat (center center) fixed;

注：background-size此样式不能简写于一行中

颜色类（三原色：红绿蓝）

关键字取值：red、bule、skybule等

十六进制：#+6位数字或字母

rgb（参数1,参数2,参数3）

rgba（参数1,参数2,参数3,参数4）

rgb与rgba的前三个取值范围都是0到255，rgba的第四个参数是透明度，一般是设置百分比，如：50%、0.5，透明度可给0到1之间的小数