菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: css-贾淑圆-20230208 [打印本页]

---

作者: 路人贾    时间: 2023-2-8 23:43
标题: css-贾淑圆-20230208
今日学习内容：   9:00-20:00  
css的背景
背景颜色background-color

• 
  
  • 属性值
    
    • 默认值：transparent
      
    • 十六进制
      
    • RGB
    • 预定义颜色
      
• 背景图片
  
  • background-image
    
  • 属性值
    
    • url(图片路径)
      
    • 默认值：none
      
• 背景平铺
  
  • 网页中的x轴和y轴
    
  • 属性是background-repeat
    
    • 属性值
      
      • repeat  默认值，横向纵向都平铺
        
      • no-repeat  背景不平铺
        
      • repeat-x  背景横向平铺
        
      • repeat-y  背景纵向平铺
        
• 背景定位
  
  • 属性：background-position
    
    • 属性值
      
      • 方位名词
        
        • top、bottom、left、right、center
          
        • 例
        • 注意点
          
          • 方位名词的位置可以随意变换
            
          • 如果只写一个方位名词，那么另一个默认是center
            
      • 精确单位
        
        • 有两个值，分别是x和y
          
        • 注意点：
          
          • 如果是精确单位，第一个一定是x轴坐标，第二个一定是y轴坐标
            
          • 如果只指定一个数值，那么一定指定的是x轴的坐标，y轴则默认居中
            
        • 例
          
      • 混合单位
        
        • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x轴坐标，第二个值是y轴坐标
        • 
          
• 背景图片滚动
  
  • 属性是 background-attachment
    
    • 属性值
      
      • scroll  随着屏幕滚动 默认值
        
      • fixed  不跟随屏幕滚动
        
• 背景的复合写法
  
  • 属性background
  • 属性值为 背景颜色 背景图片 背景平铺 背景图片滚动 背景图片的位置  推荐的写法顺序，
    
• 背景颜色的半透明
  
  • 属性：background:rgba(0,0,0,0.3);
    
    • rgba中的a是alpha的缩写，代表透明程度，取值范围是0~1
      
    • 透明度的小数点之前的0可以去掉 可以写成.3
      
    • 背景半透明不会影响盒子里面内容
      
• 背景缩放
  
  • 属性 background-size
    
    • 属性值
      
      • 精确单位
        
        • 精确单位来控制，第一个是宽度，第二个值是高度
          
      • 百分比单位
        
        • 使用百分比单位来控制，第一个值是宽度，第二个值是高度，参照盒子的宽度和高度进行计算
          
      • cover
        
        • 宽度和高度适配到覆盖整个盒子大小为止
          
      • contain
        
        • 背景图片缩放到宽度或者高度任一一项到达盒子的宽或高度就停止缩放
        • 21:00-23:00完成今日作业，完成今日笔记
        • 今日问题：今日作业不会做，待明日老师讲解
          

---

欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)

Powered by Discuz! X3.4