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
第三章 算法 前言:许多人对算法的看法是截然不同的,我之前提到过了.不过,我要说的还是那句话:算法体现编程思想,编程思想指引算法. 同时,有许多人认为简单算法都太简单了,应当去学习一些更为实用的复杂算 ...
随机推荐
- android Failure [INSTALL_FAILED_OLDER_SDK] 安装apk失败
安装文件与运行环境的skd不匹配 打开源码目录下的AndroidManifest.xml文件,然后注释掉或者删除掉这行: <uses-sdk android:minSdkVersion=&quo ...
- [水题]ZOJ3038 Triangle War II
题意: 给了这样一张图 有两种状态:pushed(*)和unpushed(.) 为方便起见分别成为 开 和 关 改变一个点的开关状态 会同时改变与它相邻的点的开关状态 比如改变5,则2.3.4 ...
- Android ListView(Selector 背景图片)
listview0.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmln ...
- 149. Max Points on a Line
题目: Given n points on a 2D plane, find the maximum number of points that lie on the same straight li ...
- Emmet(前身是zen coding)介绍和使用
Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuyonok开发. 现在它改名为了Emmet,并且搭 ...
- Form - CHECKBOX全选功能
FORM BUILDER开发,遇到这样一个需求: 添加一个CHECKBOX完成全选功能,红框为新添加的CHECKBOX(如图示) Try to use APP_RECORD.FOR_ALL_RECOR ...
- AS 学习笔记 加载数据
AS2 加载本地(外部)数据.swf .png .jpg 等资源使用loadMovie() 加载库里面的mc 用 attachMovie AS3 加载本地(外部)数据 用 Loader 类来完成这个操 ...
- Wpf配置文件属性
public MainWindow() { InitializeComponent(); this.WindowState = Properties.Settings.Default.WindowSt ...
- JQuery对XML文件的操作
xml文件如下: <?xml version="1.0" encoding="utf-8" ?> <Root> <Parent&g ...
- 普通pc电脑安装苹果系统mac_详细教程(精)附带所有工具下载
苹果操作系统只允许在苹果电脑上面安装和使用.和Windows不一样,要在PC上安装,需要一系列的模拟和破解.破解安装的过程很繁琐而具有挑战性,以下是安装10A432雪豹的PC安装指南,附带25张图片帮 ...