• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS中背景background-position负值定位深入理解[图文]

CSS中背景background-position负值定位深入理解[图文]

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含background-position,负值,定位等相关知识,佚名 希望在学习及工作中可以帮助到您
下面是我要用到的一个背景图:


代码如下:



  从上图可以看到:当为background-position:0 0;时图片的左上角与DIV的左上角是重合的,当我们定位于background-position:-50px -50px;时发现图片向左、上移动了,也就以DIV的左上角为中心,图向左移动了50PX,向上也移动了50PX.第三个示例采用的都是正值,可以解解释为图向右、向下移动的效果.这个应该是好理解的.
  总结一下就是以上都是以DIV的0,0点为参考点图片移动,如果把DIV区解释为一个坐标轴图,向左,上都为负,向右,下为正值.

  好象说这么多你也记不住,那我就告诉你,你应该记住什么吧!

  在实践中多数情况是知道一个图的位置要如上图中那个黄色的点,我们应该在效果图上量出它的长度得出两个值都是150PX,那我们定义图的位置就要写background-position:-150px -150px;这样就定义好了,在图上的量法就看下图(这张图相当于你用的效果图或称设计图),记住这张图相信你一定能掌握背景图负值的方法了。

CSS中背景background-position负值定位深入理解

您可能想查找下面的文章:

  • CSS背景background、background-position使用详解
  • CSS中背景background-position负值定位深入理解[图文]
  • 利用CSS定位背景图片 background-position
  • CSS background-position的使用说明详解
  • CSS background-position 属性 定位图片

相关文章

  • 2017-08-06CSS中的层分离编程详解
  • 2017-08-06深入解析CSS中z-index属性对层叠顺序的处理
  • 2017-08-06CSS网页布局25个实用小技巧
  • 2017-08-06CSS实现HTML元素透明的方法小结
  • 2017-08-06CSS中的inherit使用技巧小结
  • 2017-08-06一波CSS+Div实用技巧小结
  • 2017-08-06你正在寻找的CSS3 动画技术
  • 2017-08-06用css margin去掉横排图片之间的间距
  • 2017-08-06css hack之清除浮动(clearfix)
  • 2017-08-06网站变灰色兼容代码 包括图片 支持所有浏览器

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css reset样式重置介绍 重置css样式工具分享
    • DIV+CSS实现仿京东商城导航条效果
    • CSS的执行顺序和优先级问题示例探讨
    • CSS浏览器兼容性Hack大全
    • CSS背景图拉伸效果兼容FF/Chrome/IE等主流浏览器(亲测)
    • css制作黑色经典导航下拉菜单
    • IE.JS解决IE兼容性问题方法汇总
    • css的border和clear属性使用方法和示例
    • CSS Cookbook 创建文字导航菜单和翻转特效
    • meta http-equiv="X-UA-Compatible" content="IE=7" 意思是将IE8用IE7进行渲染

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有