background-position也许你没考虑到

设置背景图片时不知你有没有遇到过背景位置的困扰,有没有深入思考过,background-position到底是什么,下面请各位看看我的理解。

简而言之就一句话,默认图片左上角居元素左上角的坐标,例如:

假设我有一元素高度是30px,有一张这个复选框的背景图,如果我设置background-position:0 0;我们都知道这张图片出现在元素的左上角,而且未被选中的部分显示出来,如果我设置为(0 -30px),选中样式的图片显示出来。

我现在有另一图片距离元素右侧5px,底部10px,如何设置背景图的position呢?

其实background-position可以指定上下左右的位置的,例如:

background-position:right 5px bottom 0;

第一次写博客,不太会措辞,如果你有异议或没理解可以评价,看到之后我会第一时间回复

时间: 2024-10-12 18:26:04

background-position也许你没考虑到的相关文章

background position 稍微深入

1 当容器大于背景图片时  1.1 当position为20px 30px是,是指图片左上角离外容器的左上角的距离是20px 30px  1.2 当position为10% 10%d的时候,背景图片的10% 10%的这个点 和 外容器10% 10%的这个点 重合.2 当容器小于背景图片的时还是同样的结果.-------------------------http://blog.csdn.net/freshlover/article/details/7197724

你在读文学作品的时候也许从来没考虑这些问题

中国文学史 一.名词解释 上古神话   七发    "诗赋欲丽"   <五柳先生传>   文章四友   <中兴间气集> 婉约之宗   艳段    格调说   明中叶三大传奇    史传文学  玄言诗  唐诗八大家 南戏    建安风骨    古文运动    拟话本   <射鹰楼诗话>   风骚   乐府    前七子  花间派词人  论语  元杂剧体例 二.默写 1.默写并注释岑参七绝<逢入京使> 2.默写并注解被推为"唐人七绝

position

position:定位 定位分四种: 1.静态定位 : 浏览器自动定位. 2. 相对定位 (position:relative):以前一个同一级元素的坐标位置来定位 3 .绝对定位(position:absolute):他是以父级元素的坐标位置来定位 4.固定定位(position:fied)  :   蒋一个元素固定在某一个位置,位置不随页面的滚动而发生改变. z-index():提层括号中数值越大元素显示位置越向外 雪碧图就是利用定位制作 首先给一个视口:宽(width)高(hight) 插

html5+css3中的background: -moz-linear-gradient 用法 (转载)

转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linear-gradient(top,  #bccfe3 0%, #d2dded 100%);  适合 FF3.6+ background: -webkit- grad

CSS之Position全面认识

CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属 性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型结构,以及定位.正如positioniseverything,本文将主要讲述关于 position的理解,力求让您看完本文后对position有着最全面的认识. position的四个属性值 relative absolute fixed static 下面分别讲述这四个属性 复制代码 代码如下:

css3的Background新属性

前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background-origin与background-clip的区别尚不清楚.就google了一篇,发现不错,翻译下来吧. 原文连接 : The New Background Position in CSS3 Say Hello to Background-Origin and Background-Clip, C

html5+css3中的background: -moz-linear-gradient 用法

在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linear-gradient(top,  #bccfe3 0%, #d2dded 100%);  适合 FF3.6+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bccfe3), color-stop(

Android仿小米商城商品详情界面UI,ScrollView嵌套ScrollView/WebView/ListView

最近公司没事,研究了下多嵌套滚动组件的事件分发,虽然以前也接触过,但都是拿网上的用,也是特别简单的,正好朋友也需要,就研究了下 这个Demo也不是很完善,放上来也是让各位大牛给指点一下,优化优化 使用情景: 小米商城商品详情界面,界面看似ScrollView,但当正常滚动到底部时,提示继续上拉显示更多详情,上拉后直接滚动到第二屏,第二屏是个ViewPager,ViewPager里面的各个pager有的是WebView有的是ListView,有的是ScrollView,一开始想想就特别头晕,后来理

Day 47(08/02)选择器、 伪类

属性选择器 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 E[att]          匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略.                 比如"[cheacked]".以下同.)   p[title] { color:#f00; } E[att=val]      匹配所有att属性等于"val"的E元素   div[class="error"] { col