admin管理员组文章数量:1611517
在文档上看到对于background-position的解释有些含糊,翻阅《CSS设计指南》后发现书上讲得挺清楚的,在此做个总结。
background-position属性用来控制背景(图)相对于元素的位置,元素的左上角和图片的左上角默认是对齐的。该属性可以使用三种值:关键字、百分比、绝对或相对单位的数值。
关键字:包括top、left、bottom、right和center,这5个关键字两两组合都可以作为该属性的值,比如top right表示把图片放在元素右上角的位置,center center把图片放在元素的中心位置。关键字的顺序并不重要,top right和right top的意思相同,为了设定的值在所有浏览器中都有效,最好不要混用关键字值和数字值。只设置一个关键字值,另一个也会取相同的值。
div{
width: 200px;
height: 200px;
margin-top: 100px;
background: url(html.jpg) no-repeat;
border: 1px solid black;
background-position: top right;
}
百分比:使用百分比或数值时,第一个值表示水平位置,第二个值表示垂直位置,要是只设定一个值,则Ⅶ用来设定水平位置,而垂直位置会被设为center
div{
width: 200px;
height: 200px;
margin-top: 100px;
background: url(html.jpg) no-repeat;
border: 1px solid black;
background-position: 50% 50%;
}
使用关键字或者百分比,设定的值同时应用于元素和图片,也就是说,如果设定了50% 50%,表示图片水平50%的位置与元素水平50%的位置对齐,垂直方向也一样。center center 表示图片的中心点和元素的中心点对齐。
绝对或相对单位的数值:px,em等,表示图片的左上角和元素左上角的相对位置,0 0 表示图片位于左上角。数值可以为负值,这样可以把元素的左上角定位在元素外面。负值可应用于雪碧图。数值设置得足够大也可以将元素的右下角推到元素外面。
div{
width: 200px;
height: 200px;
margin-top: 100px;
background: url(html.jpg) no-repeat;
border: 1px solid black;
background-position: 0 -50px ;
}
本文标签: backgroundPosition
版权声明:本文标题:对background-position的理解 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1728604836a1165319.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论