设置背景图片时不知你有没有遇到过背景位置的困扰,有没有深入思考过,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. 应该知道的25个非常有用的CSS技巧

    在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...

  2. hdu 4815 Little Tiger vs. Deep Monkey

    概率dp,有点像背包的做法: dp[i][j]代表前i个数组成的j数的概率为多少 #include<cstdio> #include<cstring> #define maxn ...

  3. PHP basename() 函数

    定义和用法 basename() 函数返回路径中的文件名部分. 语法 basename(path,suffix) 参数 描述 path 必需.规定要检查的路径. suffix 可选.规定文件扩展名.如 ...

  4. 严重: The web application [] registered the JDBC driver 错误

    近日发现启动tomcat的时候报如下警告: -- :: org.apache.catalina.loader.WebappClassLoader clearReferencesJdbc 严重: The ...

  5. Maven如何手动添加jar包到本地Maven仓库

    Apache Maven,是一个软件(特别是Java软件)项目管理及自动构建工具,由Apache软件基金会所提供.基于项目对象模型(缩写:POM)概念,Maven利用一个中央信息片断能管理一个项目的构 ...

  6. 【Xamarin挖墙脚系列:IOS-关于手机支持的屏幕方向】

    原文:[Xamarin挖墙脚系列:IOS-关于手机支持的屏幕方向] 设置支持的屏幕方向有两个级别,一个是app级别的,另一个是viewController级别的. app 级别的可以在[target] ...

  7. 132. Palindrome Partitioning II

    题目: Given a string s, partition s such that every substring of the partition is a palindrome. Return ...

  8. windows ハンドル

    windows句柄 这篇文章是我在学习的时候为了以后忘记所以把当时的理解记录下来.一定有不正确的地方,所以仅供参考. 我们初学VC++是经常遇到一些我们在标准C++中没有的数据类型,如句柄,消息.  ...

  9. WPF编程学习——动画

    前言 使用动画,是增强用户体验的一种有效的手段.合理的动画,可以让应用程序的界面看起来更加自然.真实.流畅.舒适,更有效地向用户展现信息,用户也更容易接受.同时也增加了软件使用的乐趣,提高用户粘度.( ...

  10. bzoj1046

    首先这肯定是一道LIS的变形,这次求的是方案,还要求字典序最小 (注意这个字典序最小是指下标最小而不是数最小) 首先预处理以每个数为首,能组成多长的上升序列(这里我们用单调队列解决) 然后按照位置顺序 ...