background-position属性的百分比值如何用？一文带你搞懂
发布时间：2022-04-18 14:23:38 所属栏目：语言 来源：互联网
导读：background-position属性的定义是设置背景图片的位置，其默认值为0% 0%。很多人对于这个百分比值的使用不是很清楚，因此，这篇文章主要和大家聊一聊background-position属性中百分比值的使用，感兴趣的朋友就继续往下看吧。 background-position如何影响背景
|
background-position属性的定义是设置背景图片的位置，其默认值为0% 0%。很多人对于这个百分比值的使用不是很清楚，因此，这篇文章主要和大家聊一聊background-position属性中百分比值的使用，感兴趣的朋友就继续往下看吧。 background-position如何影响背景图的展示 在替换首页图片的时候，小编发现了一个问题，之前的样式设置的是background-position:center,当页面缩小或者放大时背景图显示的区域也会变化，现在改成left top后，页面如何变化大小图片位置都没动。这一想，也不对啊，background-position:center难道不是从元素居中位置才显示背景图吗，为什么还是占满了全部元素区域？这个center到底指的是背景图的center还是元素的center？ background-position-x: left （等价于0%） background-position-x: right （等价于100%） background-position-y: top （等价于0%） background-position-x: bottom （等价于100%） 抛开固定像素值定位，那么这次主要探究百分比值对背景图位置的影响，百分比值正常来看应该是相对于元素的宽高的百分比，然而实际表现却不是如此。 设置为百分比值的实际情况 注：此次用作背景元素容器的元素宽高设置为100%，100%，且无border和padding （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
