background-position也许你没考虑到
设置背景图片时不知你有没有遇到过背景位置的困扰,有没有深入思考过,background-position到底是什么,下面请各位看看我的理解。
简而言之就一句话,默认图片左上角居元素左上角的坐标,例如:
假设我有一元素高度是30px,有一张
这个复选框的背景图,如果我设置background-position:0 0;我们都知道这张图片出现在元素的左上角,而且未被选中的部分显示出来,如果我设置为(0 -30px),选中样式的图片显示出来。
我现在有另一图片距离元素右侧5px,底部10px,如何设置背景图的position呢?
其实background-position可以指定上下左右的位置的,例如:
background-position:right 5px bottom 0;
第一次写博客,不太会措辞,如果你有异议或没理解可以评价,看到之后我会第一时间回复
background-position也许你没考虑到的更多相关文章
- CSS使用position定位后导致元素浮动
1.子元素 absolute/fixed定位后,子元素脱离文档流存在,它让出原来占的那个坑,父元素再也不能通过子元素来撑开高度了 <style> div{ position:absolut ...
- CSS中position:fixed的用法
我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...
- html5+css3中的background: -moz-linear-gradient 用法
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...
- html5+css3中的background: -moz-linear-gradient 用法 (转载)
转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...
- CSS之Position全面认识
CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属 性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型 ...
- css3的Background新属性
前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...
- 巧用 mask-image 实现简单进度加载界面
最近给 nzoo 折腾官网,拿 angular2.0 + webpack 实现SPA,然后觉得最终打包后的出口文件有点大,用户首次访问会有一个时间较长的白屏等候界面,感觉体验不太好. 于是希望在用户下 ...
- 使用bokeh-scala进行数据可视化
目录 前言 bokeh简介及胡扯 bokeh-scala基本代码 我的封装 总结 一.前言 最近在使用spark集群以及geotrellis框架(相关文章见http://www.cnbl ...
- C语言范例学习04
第三章 算法 前言:许多人对算法的看法是截然不同的,我之前提到过了.不过,我要说的还是那句话:算法体现编程思想,编程思想指引算法. 同时,有许多人认为简单算法都太简单了,应当去学习一些更为实用的复杂算 ...
随机推荐
- responsive web design
http://d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html http://alistapart.com/article ...
- Javascript实现打字效果
伤感的 学期末 今天是这学期的最后一天,考完了最后一门数学,明天我们就要各自为自己的暑假打算打算了,所以趁着大家还没走一起出去打了打篮球,玩了玩轮滑,很累但是很开心,最大的感触莫过于忧伤额,明年我或许 ...
- ***PHP 去除换行符
PHP在不同的系统中,换行是不同的 Linux:\n Windows:\r\n mac:\r 所以去除回车换行的方法: 1.使用php定义好的变量(比较好的方法,推荐) $str= str_repla ...
- Cocos2d-x 3.2编译Android程序错误的解决方案
最近的升级Cocos2d-x 3.2正式版.iOS不管是什么程序编译问题,使用结果cocos compile -p android编译APK计划.结果悲剧,出现以下错误. Android NDK: I ...
- 告别山寨数据线:USB Type-C加密认证出炉
从去年苹果发布的MacBook首次采用USB Type-C接口开始,这一标准逐渐成为主流,许多旗舰手机慢慢地采用了这种接口.今日,非盈利机构USB开发者论坛(USB-IF)宣布了USB Type-C认 ...
- Ubuntu zookeeper-3.5.0-alpha启动错误 zkEnv.sh: Syntax error: "(" unexpected (expecting "fi")(转)
昨天小猿我把Ubuntu Server64位上的 zookeeper换成了最新版本的,结果启动的时候出错:之前zookeeper-3.3.6是没有任何问题的,换成了zookeeper3.5出现了下面的 ...
- layer父页面刷新
$.ajax({ type:"POST", url:"{sh::U('Address/edit')}", data: $("#saveform&quo ...
- Struts 2.3.1.1 命令执行漏洞
漏洞版本: Struts 2.3.1.1 漏洞描述: CVE ID:CVE-2011-3923 Struts2的核心使用的是WebWork框架,而WebWork通过XWork来处理用户的请求参数.Xw ...
- poj 1167 简单搜索
这题主要是注意好限定的条件 条件1:每个公交车都至少要到达两次 条件2:公交车相同时间和相同间隔是属于两种车辆 条件3:不同的车可能到达时间相同 上述都是深搜的重要条件: #include<al ...
- (转载)php array_merge 和 两数组相加区别
(转载)http://www.cnblogs.com/shistou/archive/2013/03/16/2963586.html PHP中两个数组合并可以使用+或者array_merge,但之间还 ...