设置背景图片时不知你有没有遇到过背景位置的困扰,有没有深入思考过,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. BZOJ 3983 Takeover Wars 解题报告

    我猜了一个结论,能合并就合并,到了必须要敌对交易的时候才进行敌对交易. 然后合并的话,肯定是拿最大的两个去合并. 至于敌对交易,肯定是干掉对方最大的公司才是有意义的. 于是各种分类讨论...看代码好了 ...

  2. MyEclipse使用自己的JDK和Tomcat

    配置tomcat:window-->preferences-->myeclipse-->servers-->tomcat-->选一个-->右边选择一的tomcat的 ...

  3. Linux(CentOS)常用命令

    http://fedoranews.org/alex/tutorial/rpm/3.shtml rpm.org rpm -qa|grep mysql 查询已安装的含有mysql的包. mv 移动文件. ...

  4. android 案例:从另一个activity选择信息并获取返回值

    主窗口: package com.example.test; import android.app.Activity; import android.app.AlertDialog; import a ...

  5. WIP Job > APP-WIP-25191 or Pending Close

    使用 Close Discrete Jobs (FORM) 关闭工单,有一工单的状态一直为PENDING CLOSE 检查 PENDING MATERIAL TRANSACTION ,PENDING ...

  6. poj3140Contestants Division

    链接 这叫树形DP吗..?断开某条边 求剩下两颗树数权值和的差最小 dfs一遍 枚举边 查了n久 wa n次  dp数组没初始化.. 在poj上1A感觉应该挺爽 #include <iostre ...

  7. Hibernate java.lang.NoSuchFieldError: INSTANCE

    在使用hibernate3.6.2是我遇到了一个有趣的错误java.lang.NoSuchFieldError: INSTANCEat org.hibernate.type.BasicTypeRegi ...

  8. Automator一键生成所需的iOS 图片icon

    iOS到8了, 终于受不了它的各种尺寸的icon了. 写一个Finder服务来一键生成吧. 拖放几次再重复, 无技术含量, 但很有用. // 存放目录    ~/资源库/Services/

  9. 【转】ubuntu 11.10(32位系统)下编译android源码

    原文网址:http://www.cnblogs.com/dwayne/archive/2011/11/16/2251734.html 本文介绍在ubuntu 11.10系统下编译android 2.3 ...

  10. BrnShop开源网上商城第二讲:ASP.NET MVC框架

    在团队设计BrnShop的web项目之初,我们碰到了两个问题,第一个是数据的复用和传递,第二个是大mvc框架和小mvc框架的选择.下面我依次来说明下. 首先是数据的复用和传递:对于BrnShop的每一 ...