码迷,mamicode.com
首页 > Web开发 > 详细

20-css控制背景与css精灵

时间:2020-03-22 13:36:02      阅读:70      评论:0      收藏:0      [点我收藏+]

标签:次数   方式   com   翻转   链接   fixed   提高   显示图片   repeat-x   

CSS控制背景
  背景 background:颜色 图片 平铺方式 固定方式 位置
  背景颜色 background-color:red;
  背景图像 background-image:url(背景图像的位置及全称)
  背景图片的重复方式 background-repeat:[repeat、no-repeat、repeat-x、repeat-y]

    x坐标y坐标[第一个值是水平位置,第二个是垂直位置]左上角0 0。单位是像素(0px 0px)
  背景图像的位置 background-position:top[left center right]   center[left center right] bottom[left center right]
  背景图像的依附方式 background-attachment:[scroll、fixed]


  背景图片,默认情况是进行水平与垂直方向的平铺
  默认背景图片,在元素的左上角显示
  背景图片的依附方式:固定的含义是,将图片固定在,屏幕的某一个位置
  兼容性:IE6只有html与body这两个元素,支持这个属性值。--background-attachment:fixed;
  让你显得专业一点的技巧:
  翻转效果:其思路就是,准备两张大小相同,内容不同的图片,正常情况下显示一张,在鼠标经过的时候再显示另一张
  它叫伪类,表示一种状态
  :link
  CSS Sprites(CSS精灵)
  制作翻转按钮效果的两种方法:
  第一种:我们需要两张图片,一张正常状态的图片,一张鼠标经过时的图片,做这种按钮思路就是,设置链接a的背景为第一张图片a:hover的背景为第二张图片

  技术图片


  第二种:将上面两张图片合并成一张图片、设置成按钮的背景,然后,将a:hover的背景向上移动相应的像素即可
  技术图片  


  css精灵技巧:主要是为了,减少 http 请求。
    浏览器----服务器(交流)---超市购物---结账时侯。
    优化网页的,http请求次数,提高网页的效率
  ****css精灵的核心思想:就是将多张图片,合并为一张图片,然后通过背景属性中的定位来控制到底显示图片中的哪些部分

  ******如果网页中能选择中的图片,肯定就是插入的图片,选不中,就是背景图片

 

20-css控制背景与css精灵

标签:次数   方式   com   翻转   链接   fixed   提高   显示图片   repeat-x   

原文地址:https://www.cnblogs.com/xiang-liang/p/12545492.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!