css中怎么改变图片的位置

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中的背景属性可以改变图片的位置,可以使用 background-position 属性来实现。这个属性接受两个参数,分别是水平方向和垂直方向的位置。background-position: 水平

CSS中的背景属性可以改变图片的位置,可以使用 background-position 属性来实现。这个属性接受两个参数,分别是水平方向和垂直方向的位置。

background-position: 水平位置 垂直位置; 

水平位置和垂直位置可以使用具体的像素值,也可以使用百分比来表示相对于父元素的位置。如果只写一个值,那么另一个值会默认为50%。

background-position: 20px 10px; /* 水平位置为20px,垂直位置为10px */
background-position: 30% 50%; /* 水平位置为30%,垂直位置为50% */
background-position: left top; /* 水平位置对齐左边,垂直位置对齐顶部 */
background-position: center; /* 水平垂直位置都居中 */
background-position: right bottom; /* 水平位置对齐右边,垂直位置对齐底部 */ 

需要注意的是,如果使用了 background-repeat 属性,那么位置的设定可能会有所变化,因为图片并不是独占整个背景的。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎么改变图片的位置

粉丝

0

关注

0

收藏

0

已有0次打赏