admin管理员组

文章数量:1611398

在文档上看到对于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://m.elefans.com/xitong/1728604836a1165319.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。