设置背景图片时不知你有没有遇到过背景位置的困扰,有没有深入思考过,background-position到底是什么,下面请各位看看我的理解。

简而言之就一句话,默认图片左上角居元素左上角的坐标,例如:

假设我有一元素高度是30px,有一张这个复选框的背景图,如果我设置background-position:0 0;我们都知道这张图片出现在元素的左上角,而且未被选中的部分显示出来,如果我设置为(0 -30px),选中样式的图片显示出来。

我现在有另一图片距离元素右侧5px,底部10px,如何设置背景图的position呢?

其实background-position可以指定上下左右的位置的,例如:

background-position:right 5px bottom 0;

第一次写博客,不太会措辞,如果你有异议或没理解可以评价,看到之后我会第一时间回复

background-position也许你没考虑到的更多相关文章

  1. CSS使用position定位后导致元素浮动

    1.子元素 absolute/fixed定位后,子元素脱离文档流存在,它让出原来占的那个坑,父元素再也不能通过子元素来撑开高度了 <style> div{ position:absolut ...

  2. CSS中position:fixed的用法

    我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...

  3. html5+css3中的background: -moz-linear-gradient 用法

    在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...

  4. html5+css3中的background: -moz-linear-gradient 用法 (转载)

    转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...

  5. CSS之Position全面认识

    CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属 性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型 ...

  6. css3的Background新属性

    前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...

  7. 巧用 mask-image 实现简单进度加载界面

    最近给 nzoo 折腾官网,拿 angular2.0 + webpack 实现SPA,然后觉得最终打包后的出口文件有点大,用户首次访问会有一个时间较长的白屏等候界面,感觉体验不太好. 于是希望在用户下 ...

  8. 使用bokeh-scala进行数据可视化

    目录 前言 bokeh简介及胡扯 bokeh-scala基本代码 我的封装 总结 一.前言        最近在使用spark集群以及geotrellis框架(相关文章见http://www.cnbl ...

  9. C语言范例学习04

    第三章 算法 前言:许多人对算法的看法是截然不同的,我之前提到过了.不过,我要说的还是那句话:算法体现编程思想,编程思想指引算法. 同时,有许多人认为简单算法都太简单了,应当去学习一些更为实用的复杂算 ...

随机推荐

  1. 机器学习算法与Python实践之(三)支持向量机(SVM)进阶

    机器学习算法与Python实践之(三)支持向量机(SVM)进阶 机器学习算法与Python实践之(三)支持向量机(SVM)进阶 zouxy09@qq.com http://blog.csdn.net/ ...

  2. Unity3D连接真机调试教程,可抓断点

    源地址:http://www.unity蛮牛.com/thread-19586-1-1.html <ignore_js_op> 未标题-1.jpg (52.33 KB, 下载次数: 0) ...

  3. 如何从软硬件层面提升 Android 动画性能?

    若是有人问如何解决动画性能不佳的问题,Dan Lew Codes 总会反问:你是否使用了硬件层? 动画放映过程中每帧画面可能都要重绘.如果使用视图层,,渲染过的视图可以存入离屏缓存以待将来重用,而无需 ...

  4. 1842-A. Broj

    #include <iostream> using namespace std; int main() { int n; cin>>n; if(n>0&& ...

  5. asp.net 弹出式日历控件 选择日期 Calendar控件

    原文地址:asp.net 弹出式日历控件 选择日期 Calendar控件 作者:逸苡 html代码: <%@ Page Language="C#" CodeFile=&quo ...

  6. [OJ] Data Stream Median (Hard)

    LintCode 81. Data Stream Median (Hard) 思路: 用一个大根堆保存较小的一半数, 一个小根堆保存较大的一半数. 每次根据num和两个堆顶的数据决定往哪个堆里面放. ...

  7. 在C++中子类继承和调用父类的构造函数方法

    构造方法用来初始化类的对象,与父类的其它成员不同,它不能被子类继承(子类可以继承父类所有的成员变量和成员方法,但不继承父类的构造方法).因此,在创建子类对象时,为了初始化从父类继承来的数据成员,系统需 ...

  8. EF多数据库预热

    使用EF第一次加载程序会很慢,因为EF第一次会生成实体类和数据库的对应关系并做缓存,怎么解决这个问题呢?站在巨人的肩膀上将会省力很多,博客园的dudu已经给出了个解决方案(EF版本6.0以上) htt ...

  9. Discuz! x3.1的插件/utility/convert/index.php代码执行漏洞

    漏洞版本: Discuz! x3.1及以下版本 漏洞描述: Discuz! x3.1的插件/utility/convert/index.php存在代码执行漏洞,如果用户在使用完之后不删除,会导致网站容 ...

  10. XCode中Architecturs配置及常见问题

    http://lanvige.github.io/2014/03/19/architecturs-in-xcode/ XCode 5.1升级后因arm64和CocoaPods的原因,痛了一天,终于解决 ...