zoukankan      html  css  js  c++  java
  • CSS给背景图定位

    background-position:
    | [percentage | length]{1,2}
    |[top | center | bottom]
    | [left | center | right] www.86oo.com

    background-position:[percentage | length]是用X(横坐标)y(纵坐标)定义,如background-position: 20px 40px; http://www.86oo.com

    background-position:[top | center | bottom] 和[left | center | right] 是一样的意思了,三个任意两个搭配可以产生不同的效果.
    可以是background-position:top center;center bottom;top bottom;left,right.....

    www.86oo.com

    bottom:下,top:上,left:左,right:右,center:中.

    www.86oo.com

    下为像素与英文的对照:
    top left = left top = 0% 0%
    top = top center = center top = 50% 0%
    right top = top right = 100% 0%
    left = left center = center left = 0% 50%
    center = center center = 50% 50%
    right = right center = center right = 100% 50%
    bottom left = left bottom = 0% 100%
    bottom = bottom center = center bottom = 50% 100%
    bottom right = right center = 100% 100%

    86oo精彩教程

    background可以用来给指定的层填充背景色、背景图片,格式如下:

    86oo.com欢迎你

    background:#ccc url('bg.gif') top left no-repeat;
    表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片,
    top left表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。
    top/right/left/bottom/center用于定位背景图片,分别表示 上 / 右 / 下 / 左 / 中;

    86oo.com提供各类教程

    background:url('bg.gif') 20px 100px;
    表示X坐标为20像素,Y坐标为100像素的精确定位;

    86oo.com

    repeat/no-repeat/repeat-x/repeat-y
    分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。

  • 相关阅读:
    TCP Socket服务器编程[转文]
    http协议学习和总结系列[转 ]
    linux C函数大全
    HTTP 协议详解
    Pthread 多线程总结
    linux 中解析命令行参数 (getopt_long用法)
    微软企业库4.1学习笔记(十八)缓存模块6 缓存的设计目的
    微软企业库4.1学习笔记(十七)缓存模块5 缓存的典型用法
    进程和线程的区别
    C#二叉树遍历算法实现浅析
  • 原文地址:https://www.cnblogs.com/see7di/p/2240060.html
Copyright © 2011-2022 走看看