zoukankan      html  css  js  c++  java
  • CSS background属性

    我们在研究其他的网站的样式的时候经常会发现一种情况,就是在很多background属性里都调用同一张图片,来满足网页各个部分的使用。打开这种图片看一下,会发现这张图片上包含了很多小图片;

    这些小图片就是整图分割后的各个部分,把各个部分放在一张图片上,而不是是分别存储成单独的图片,其目的我们都知道,就是减少http请求次数,节省时间和带宽

    那么怎么来实现一张图片在不同的地方只显示其中的一部分呢,这就用到了我们今天要说的背景图片的定位问题。这个问题相信很多人都郁闷过,也经常有朋友问我,所以今天就系统的说一下:

    我们知道在用图片作为背景的时候,css要这样写,以div容器举例子,也可以是body、td、p等的背景,道理一样。

    div{ background:#FFF url(image) no-repeat fixed x y;}

    这里的background的属性值依次为:

    #FFF 背景色:(颜色值,背景图片没有覆盖的地方,或者没有背景图片时表现的背景色)
    image 背景图片:(这里是图片的地址)
    no-repeat 是否重复:(图片小于容器的大小时,默认会重复排列图片以填满容器,no-repeat表示不重复,只有这个时候后面的定位坐标才有用。)
    fixed 背景是否随容器滚动:(有两个可选值,scroll滚动,fixed不滚动,默认是scroll)
    x y 背景图像的定位:(注意,只有在no-repeat下定位才有意义。这个就是今天要讲的重点)

     http://www.jb51.net/css/23213.html

    背景图像的定位:坐标值,百分比,关键字。


    暂且搁置 稍后研究。

    努力但不功利~~!
  • 相关阅读:
    C语言经典算法100例-039-排序队列中插入新元素
    C语言经典算法100例-037-给10个数排序
    C语言经典算法100例-036-求100之内的素数
    C语言经典算法100例-032~35
    C语言经典算法100例-031-判断星期几
    安卓 短信页面设置(线性布局)
    CSS样式表
    HTML表单
    第1部分 HTML 表格
    多线程
  • 原文地址:https://www.cnblogs.com/langlang149/p/5583740.html
Copyright © 2011-2022 走看看