CSS中background-position属性如何使用-成都快上网建站

CSS中background-position属性如何使用

CSS中background-position属性如何使用,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

成都创新互联公司专注于兰考企业网站建设,响应式网站设计,商城开发。兰考网站建设公司,为兰考等地区提供建站服务。全流程按需求定制网站,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务

CSS中background-position属性说明:

设置或检索对象的背景图像位置。必须先指定background-image属性。该属性定位不受对象的补丁属性(padding)设置影响。默认值为:0%0%。此时背景图片将被定位于对象不包括补丁(padding)的内容区域的左上角。

如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。如果指定了两个值,第二个值将用于纵坐标。如果设置值为rightcenter,因为right作为横坐标值将会覆盖center值,所以背景图片将被居右定位。

对应的脚本特性为background Position。

◆语法:

background-position:length||length
background-position:position||position

◆取值:

length:百分数|由浮点数字和单位标识符组成的长度值。
position:top|center|bottom|left|center|right

background-position--定义背景图片的位置

[||left|center|right][||top|center|bottom]]
*水平
left:左
center:中
right:右
*垂直
top:上
center:中
bottom:下
*垂直与水平的组合
x-%y-%
x-posy-pos

初始值:0%0%
继承性:否
适用于:所有元素

background:背景.position:位置.

一.background-position:lefttop;

背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。
等同于background-position:0,0;
也等同于background-position:0%,0%;

二.background-position:rightbottom;

背景图片的右下角和容器(container)的右下角对齐,超出的部分隐藏。
等同于background-positon:100%,100%;
也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器(container)的高度-背景图片的高度

三.background-position:500px15px;

背景图片从容器(container)左上角的地方向右移500px,向下移15px,超出的部分隐藏。

四.background-position:-500px-15px;

背景图片从容器(container)左上角的地方向左移500px,向上移15px,超出的部分隐藏。

五.background-position:50%50%;

等同于left:{容器(container)的宽度—背景图片的宽度}*left百分比,超出的部分隐藏。
等同于right:{容器(container)的高度—背景图片的高度}*right百分比,超出的部分隐藏。

例如:

background-position:50%50%;

就是

background-position:(1000-2000)*50%px,(500-30)*50%px;

即back

ground-position:-500px,235px;

也就是背景图片从容器(container)的左上角向左移500px,向下移235px;

六.background-position:-50%-50%;

等同于left:-{{容器(container)的宽度—背景图片的宽度}*left百分比(百分比都取正值)},超出的部分隐藏。
等同于right:-{{容器(container)的高度—背景图片的高度}*right百分比(百分比都取正值)},超出的部分隐藏。

例如:

background-position:-50%-50%;

就是

background-position:-{(1000-500)*50%}px,-{(500-360)*50%}px;

background-position:-250px,-70px;

也就是背景图片从容器(container)的左上角向左移250px,向上移70px

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


新闻名称:CSS中background-position属性如何使用
浏览地址:http://kswjz.com/article/jsgjee.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流