• 背景颜色


    1、设置背景样式:

      background-color:#bfa;  // 设置背景颜色

      background-image:url(相对路径);    //   设置背景图片

    2、可以同时给一个元素指定背景颜色和背景图片,背景颜色会作为背景图片的底色

      background-repeat:repeat;   //  设置背景图片的重复方式

      可选值:

      repeat,默认值,背景图片会双方向重复(平铺)

      no-repeat,背景图片不会重复,有多大就显示多大

      repeat-x,背景图片沿水平方向重复

      repeat-y,背景图片沿垂直方向重复

    3、背景图片默认值贴着元素的左上角显示,通过 background-position 可以调整背景图片在元素中的位置

     可选值:

     1. 该属性可以使用 top 、right 、left 、bottom 、center 中两个值来指定背景图片的位置

      top  left  左上

      bottom  right   右下

      如果值给出一个值,则第二个值默认是 center

     2. 也可以直接指定两个偏移量:background-position:100px 0px;  //  水平向右移动100个像素,垂直方向不动

      第一个值是水平偏移量:正值,图片向右移动指定像素

         负值,图片向左移动指定像素

      第二个值是垂直偏移量:正值,图片向下移动指定像素

         负值,图片向上移动指定像素

     3. background-attachment 用来设置背景图片是否随页面一起滚动

       可选值:

         scroll,默认值,背景图片随窗口滚动

         fixed,背景图片会固定在某一位置,不随页面滚动 

      当背景图片的 background-attachment 设置为 fixed 时,背景图片的定位永远相对于浏览器的窗口

    4、外部资源加载时,并不是同时加载,浏览器会在资源被使用才去加载资源(例如多张背景图片,点击更换效果)

      当触发按钮时,浏览器加载图片需要一定的时间,所以加载和显示过程会有一段时间,背景图片无法加载,导致出现闪烁的情况

      为了解决多张图片不能同时加载出现闪烁的问题,可以把三张图片整合为一张图片,

      使用 background-position 来切换显示的图片位置,这种技术叫做图片整合技术(CSS-Sprite)

      优点:

      1.将多张图片整合为一张图片里,浏览器只需要发送一次请求,可以同时加载多个图片,提高访问效率,提高用户的体验

      2.讲多个图片整个为一张图片,减小图片的总大小,提高请求速度,增加用户体验

    5、background 通过该属性可以同时设置所有背景相关的样式,没有顺序要求,也没有数量要求,不写的样式使用默认值。

      background:#bfa  url(../img/3.png)  center   center  no-repeat  fixed ;

  • 相关阅读:
    .Net中通过反射技术的应用插件程序的开发入门
    html超链接button
    WCF 跨域 Http绑定
    在ASP.NET MVC中修改默认代码生成/支架模板
    使用Lambda表达式重构委托
    使用公用表表达式(CTE)简化嵌套SQL
    WCF同域动态绑定服务地址
    WCF 跨域TCP绑定
    Silverlight 基础收集
    WCF服务控制台托管方法(不使用配置文件)
  • 原文地址:https://www.cnblogs.com/qtbb/p/11378793.html
Copyright © 2020-2023  润新知