杨鹏飞_20210112-杨鹏飞

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不会的地方,希望老师能给我提供帮助!!

标签

评论


© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1