写星级评分demo的时候,发现background-position这个属性有点神奇

background-position,有逗号和没逗号:截然不同的结果 随笔 第1张

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

如上图,在其值中加“,”与不加“,”会带来截然不同的结果,来研究一哈,顺便把这个属性复习一下

1.background-position:center(50%),

background-position,有逗号和没逗号:截然不同的结果 随笔 第2张

会被自动解析为这样的样式:

background-position,有逗号和没逗号:截然不同的结果 随笔 第3张

2.background-position:14px 60px;

background-position,有逗号和没逗号:截然不同的结果 随笔 第4张

background-position,有逗号和没逗号:截然不同的结果 随笔 第5张

到上面为止都是正常的用法,现在加个”,“:

3.background-position:14px,60px;

background-position,有逗号和没逗号:截然不同的结果 随笔 第6张

加了“,”之后,两个数值都被交给了position-x,而在开发者工具中对position-x的第二个值无论怎样修改都没有反应,这个值应该是不参与渲染的。

(暂时没有查到相关的信息)

4.为其用逗号分隔添加四个值:

同样的,只有第一个值起了作用

background-position,有逗号和没逗号:截然不同的结果 随笔 第7张

 

虽然没有查到有用的东西,但是顺便复习了一下这个属性的语法,也算有点收获了..

background-position,有逗号和没逗号:截然不同的结果 随笔 第8张

 

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄