zoukankan      html  css  js  c++  java
  • CSS背景属性简单整理

    CSS背景属性

    • background>>在一个声明中设置所有的背景属性
    //一般按以下顺序书写
    body{
        background:red url('') no-repeat fixed center;
    }
    

     

    <!--通过设置背景颜色实现线性渐变效果,语法为:linear-gradient(角度,开始颜色,结束颜色)-->
    body{
        background:linear-gradient(90deg,red,yellow);
    }
    
    • background-attachment>>设置背景图像是否固定或者随着页面的其他部分滚动

      属性值: 
      - scroll 默认值。背景图像会随着页面其余部分的滚动而滚动。(图像相对元素固定) 
      - fixed 当页面其余部分滚动时,背景图像不会移动。(图像会浮于元素内容之上,相对于视口固定) 
      - local 背景和内容一起滚动。(图像相对于元素内容固定) 

    • background-color>>设置元素背景颜色

      属性值: 
      - color_name 规定颜色值为颜色名字(如red) 
      - hex_name 规定颜色值为十六进制(如#ccc) 
      - rgb_name 规定颜色值为rgb值(如rgb(255,0,0)) 
      - transparent 默认,背景颜色为透明 

    • background-image>>设置元素的背景图像

      属性值: 
      - url(”) 指向图像的路径 
      - none 默认值,不显示背景图像 

    • background-position>>设置背景图像的开始位置

      属性值: 
      - top left 
      - top center 
      - top right 
      - center left 
      - center center 
      - center right 
      - bottom left 
      - bottom center 
      - bottom right 
      - 以上若只设置了一个值,第二个值则默认为“center” 
      - x% y% 若只设置了一个值,第二个值则默认为50% 
      - xpos ypos 若只设置了一个值,第二个值则默认为50%(可以混合使用%和position值) 

    • background-repeat>>设置是否及如何重复背景图像

      属性值: 
      - repeat 默认,背景图像将在垂直方向和水平方向重复 
      - repeat-x 背景图像将在水平方向重复 
      - repeat-y 背景图像将在垂直方向重复 
      - no-repeat 背景图像将仅显示一次 

    • background-clip>>规定背景的绘制区域

      属性值: 
      - border-box 默认值,背景被裁到边框盒 
      - padding-box 背景被裁到内边距框 
      - content-box 背景被裁到内容框 

    • background-origin>>规定背景图片的定位区域

      属性值: 
      - padding-box 默认值,背景图像相对于内边距框来定位 
      - border-box 背景图像相对于边框盒来定位
      - content-box 背景图像相对于内容框来定位 

    • background-size>>规定背景图片的尺寸

      属性值: 
      - length 设置背景图像的宽、高(若只设置一个值,高则定义为auto) 
      - percentage 以父元素的百分比来设置背景图像的宽度和高度(若只设置一个值,高则定义为auto) 
      - cover 保持图片本身比例,横向铺满父元素 
      - contain 保持图片本身比例,纵向铺满父元素

  • 相关阅读:
    SQL语句之奇形怪状的冷门函数
    计算累计收益
    关于SQL表字段值缺失的处理办法
    虚拟机移植到另一台机器
    分分钟搞懂rank() over(partition by)的使用
    分分钟搞懂union与union all
    【转】10分钟就能学会的.NET Core配置
    【转】依赖注入的威力,.NET Core的魅力:解决MVC视图中的中文被html编码的问题
    【转】Asp.Net Core2.0获取客户IP地址,及解决发布到Ubuntu服务器获取不到正确IP解决办法
    【转】在.net Core 中像以前那样的使用HttpContext.Current
  • 原文地址:https://www.cnblogs.com/tortoises/p/7497610.html
Copyright © 2011-2022 走看看