设置背景图片时不知你有没有遇到过背景位置的困扰,有没有深入思考过,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. [XJOI NOI2015模拟题13] B 最小公倍数 【找规律】

    题目链接:XJOI - NOI2015-13 - B 题目分析 通过神奇的观察+打表+猜测,有以下规律和性质: 1) 删除的 n 个数就是 1~n. 2) 当 c = 2 时,如果 n + 1 是偶数 ...

  2. Google考虑抛弃Cookies机制

    根据华尔街日报的报道,Google 正在考虑抛弃古老的浏览器 cookies 来追踪用户信息的机制.作为替代,Google 将开发一种「个人匿名标识机制」.Google 早前已经计划在 IE 和 iP ...

  3. POJ3714+最近点对

    特判标记即可 #include<stdio.h> #include<string.h> #include<stdlib.h> #include<math.h& ...

  4. SEO 网站页面SEO优化之页面title标题优化

    在seo优化中,标题的优化占着举足轻重的地位,无论是从用户体验的角度出发,还是从搜索引擎的排名效果出发,title标题都是页面优化最最重要的因素.笔者总结了优化title标题应该注意的六个方面: ①. ...

  5. SQL模糊查询与删除多条语句复习

    string IDlist="1,2,3"; 批量删除数据 StringBuilder strsql=new StringBuilder(); strSql.Append(&quo ...

  6. Protel封装库

    一.目录下面的一些封装库中,根据元件的不同封装我们将其封装分为二大类:一类是分立元件的封装,一类是集成电路元件的封装 1.分立元件类: 电容:电容分普通电容和贴片电容: 普通电容在Miscellane ...

  7. Delphi GDI+ Library

    GDI+ LibraryThis library enables GDI+ functionality for Delphi 2009 and later. It differs from other ...

  8. RxJava开发精要2-为什么是Observables?

    原文出自<RxJava Essentials> 原文作者 : Ivan Morgillo 译文出自 : 开发技术前线 www.devtf.cn 转载声明: 本译文已授权开发者头条享有独家转 ...

  9. webstore+nodejs

    新建一个普通的project. 编写如下代码: var http=require('http'); http.createServer(function(req,res){ res.writeHead ...

  10. jni数据问题

    目的: jni中(c++函数)一个 char buf[4] 如何通过env->CallVoidMethod(clazz,method_OnFindCards,jStringParam); 在ap ...