1月12日日志

1、知识点总结

1.1、背景颜色

background-color 属性定义了CSS中任何元素的背景颜色。属性接受任何有效的颜色值。

背景色扩展到元素的内容和内边距的下面。

元素的背景是元素的总大小，包括填充和边界（但不包括外边距）

值	描述
color	指定背景颜色。 eg:#ffffff 、black、rgb(255,255,100)、rgba(255,255,255,.5)、色相饱和度hsl(0~360,0%~100%,0%~100%)、hsla(0~360,0%~100%,0%~100%,0.5)
transparent	指定背景色应该是透明的。这是默认。
inherit	指定背景颜色，应该从父元素继承。

1.2、背景图片

background-image 属性允许在元素的背景中显示图像。

默认情况下。大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是以平铺填充方框。

控制背景平铺

background-repeat 属性用于控制图像的平铺行为。可用的值是：

• no-repeat —不重复。
• repeat-x—水平重复
• repeat-y—垂直重复
• repeat —在两个方向重复

调整背景图像大小

1、background-size属性，它可以设置长度或百分比值来调整图像的大小以适应背景

2、也可以设置关键字

• cover——浏览器将使图像足够大，使它完全覆盖盒子区，同时仍然保持其宽高比。
• contain——浏览器将使图像大大小适合盒子内，在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。

背景图像定位

background-position属性允许您选择背景图像在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是（0，0）框沿着水平X和垂直Y轴定位。

例：使用Top和Right

• 
background-position：top center;


使用长度值，和百分比

• 
background-position:20px 10%;


使用混合关键字，长度及其百分比

• 
background-position：top 20px right 10px;


1.3、渐变背景

使用渐变生成器。

例：linear-gradient 线性梯度渐变，延升到整个盒子上

radial -gradient 应该是径向渐变。

background-image：linear-gradient（105deg,rgba(0,249,255,1)39%,rgba(51,58,23,.5)96%

background-image:radial-gradient(circle,rgba(0,249,255,1)39%,rgba(59,234,45,1)96%)

2、心得体会

觉得一天上的很懵，对于我这种小白0基础学者来说，直接讲可能有点太仓促了。

我想知道。我能不能上课学习其他科目，比如JAVA，因为上学刚接触了JAVA知识。想深入一点。

我有啥JAVA不会的地方，希望老师能给我提供帮助！！