CSS的background位置用法

标签：电脑技巧大全,http://www.qihang56.com CSS的background位置用法,
CSS的background位置用法
　　
　　属性的定义
　　
　　background-position 属性设置背景图像的起始位置。
　　
　　设置背景原图像的位置，背景图像如果要重复，将从这一点开始。
　　
　　兼容Firefox 和Opera还需把background-attachment 属性设置为 "fixed" 。
　　
　　属性的值
　　
　　1、方向定位
　　
　　用top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right 中的一对方向值定位，如果只规定了一个关键词，那么第二个值将是"center" 。
　　
　　2、百分比定位
　　
　　一对百分比值，默认值：0% 0% 、第一个值是水平位置，第二个值是垂直位置、左上角是 0% 0%，右下角是 100% 100%、如果您仅规定了一个值，另一个值将是 50% 。
　　
　　3、像素单位定位
　　
　　一对像素值，第一个值是水平位置，第二个值是垂直位置，左上角是 0 0，单位是像素 (0px 0px) 或任何其他的 CSS 单位，如果只规定了一个值，另一个值将是50% ，可以混合使用 % 和 position 值。
　　
　　使用实例
　　
　　1、一般用法
　　
　　以下为引用内容：
　　
　　.bg-position{
　　
　　background-image:url('image-bg.gif');
　　
　　background-repeat:no-repeat;
　　
　　background-attachment:fixed;
　　
　　background-position:center;
　　
　　}2、按钮的鼠标移入动态效果
　　
　　以下为引用内容：
　　
　　.sbumint{
　　
　　overflow:hidden;
　　
　　border:none;
　　
　　background:url(images/img-bg.gif) repeat-x 42px 0;   // 按钮宽为42px ，高为21px ，在 img-bg.gif 中的位置是0px ，0px 。
　　
　　cursor:pointer;
　　
　　}
　　
　　.sbumint a:hover{
　　
　　background-position:0 -23px; ;   // 按钮上鼠标移入时显示的图片，大小与按钮图片相同，在 img-bg.gif 中的位置是0px ，-23px 。
　　
　　}效果可以参考上方搜索框。
　　
　　本文来自 http://www.qihang56.com 谢谢支持！