最近在项目中需要大量的用到很多标签按钮什么的零碎图片,加上一直没机会使用Css中的”精灵技术“,这里把我对background-position的理解写成文档供更多人使用学习。
现有所有按钮图片的合体
第一步:我们要显示 这个按钮,那么我们要先定义一个div(后面我们称为视窗)标签,宽度和高度刚好能把这个按钮装下就行。
第二步:这里便是我今天说的重点。很多人说background-position是操作的背景图,我却说是操作的这个视窗,透过视窗我们能看到背景图上的一部分而已。
横纵坐标的理解是,只要这个视窗在图片的区域内移动我们都说是负方向的(负坐标)。
显示这个图片按钮,我们不需要指定坐标,默认的就是他。当然也可以 #div5{background-position: 0px 0px;}
显示这个图片按钮,就必须的设置background-position的坐标了,#div6{ background-position:-42px 0px;}
显示这个图片按钮,#div8{ background-position:-42px -41px;}
后面的以此类推。
我这里所说的可能大家很多都懂,我只是说给一些刚入门的朋友 的一种理解方法而已,如果有不对的请大家使劲拍。(不会排版,望理解诶)
解决方案 在父元素中加入position:relative; 子元素中加入position:absolute; ri...
在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前...
工作中遇到如下需求,点击输入框弹出自定义弹窗,输入框是input标签: 但是在移...
DevOps 代表开发和运营。 这是一种新的软件开发形式,彻底改变了软件产品的开发...
最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态...
页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位...
第一部分:基础知识 1.与:active 和 :hover这些伪类不一样,他们都是伪元素。 2....
HTML5基于flash实现播放RTMP协议视频,具体代码如下所示: !doctype htmlhtmlhea...
作者:Matt Maribojoc 译者:前端小智 来源:stackabuse 有梦想,有干货,微信搜...
filter和backdrop-filter具有一定区别: Filter不仅仅作用于当前元素,后代元素...