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
第三章 算法 前言:许多人对算法的看法是截然不同的,我之前提到过了.不过,我要说的还是那句话:算法体现编程思想,编程思想指引算法. 同时,有许多人认为简单算法都太简单了,应当去学习一些更为实用的复杂算 ...
随机推荐
- loadmore & scroll
loadmore <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.m ...
- About GAC
http://blogs.msdn.com/b/msbuild/archive/2007/04/12/new-reference-assemblies-location.aspx http://web ...
- Ubuntu下与菜单和图标相关的几个文件夹
转自UBUNTU下与菜单和图标相关的几个文件夹 /usr/share/icons 系统图标文件夹 /usr/share/applications 系统菜单文件夹,要在左上角的应用程序菜单中添加一项 ...
- IgnoreRoute——注册路由
routes.IgnoreRoute("home/about"); 这句话,当Route遇到Home/About的Url时,这段URL将被忽略. 效果图 需要注意的是这里route ...
- UVALive 6609 Minimal Subarray Length (查找+构建排序数组)
描述:给定n个整数元素,求出长度最小的一段连续元素,使得这段元素的和sum >= X. 对整个数组先求出sum[i],表示前i个元素的和,然后依次求出以a[i]为起点的,总和>= X的最小 ...
- codeforces Mafia
/* * Mafia.cpp * * Created on: 2013-10-12 * Author: wangzhu */ /** * 每个人都想玩若干场,求至少需要玩几场才可以满足大家的需求. * ...
- spring+mybatis 框架搭建
注意<!-- 中间的字要保持与左右留出一个空格,否则会报错说出现两杠线 --> 1.导入jar包 aopalliance-1.0.jarasm-3.3.1.jarcglib-2.2.2.j ...
- UNICODE并没有提供对诸如Braille, Cherokee, Ethiopic, Khmer, Mongolian, Hmong, Tai Lu, Tai Mau文字的支持
UNICODE支持欧洲.非洲.中东.亚洲(包括统一标准的东亚象形汉字和韩国象形文字).但是,UNICODE并没有提供对诸如Braille, Cherokee, Ethiopic, Khmer, Mon ...
- QString内部仍采用UTF-16存储数据且不会改变(一共10种不同情况下的编码)
出处:https://blog.qt.io/cn/2012/05/16/source-code-must-be-utf-8-and-qstring-wants-it/ 但是注意,这只是QT运行(Run ...
- 《ArcGIS Engine+C#实例开发教程》
原文:<ArcGIS Engine+C#实例开发教程> 摘要:<ArcGIS Engine+C#实例开发教程>,面向 ArcGIS Engine(以下简称AE)开发初学者,本教 ...