Html css定位,背景位置为底部时对顶部和高度的影响
有人能解释一下Html css定位,背景位置为底部时对顶部和高度的影响,html,css,background-position,Html,Css,Background Position,有人能解释一下的概念吗背景位置:底部 我有HTML和CSS: 正文{ 位置:相对位置; 背景:#333; } div{ 显示:块; 边框:1px纯红; 宽度:400px; 高度:600px; 位置:相对位置; } 跨度{ 背景:url(“http://thecodeplayer.com/uploads/media/m1.png)无重复; 位置:绝对位置; 背景位置:底部; 顶部:0;底部:0;左侧:0;右侧:0; 高度:50px; 顶部:自动; } 首先让我们了解什么是背景位置: backgro
的概念吗背景位置:底部代码>
我有HTML和CSS:
正文{
位置:相对位置;
背景:#333;
}
div{
显示:块;
边框:1px纯红;
宽度:400px;
高度:600px;
位置:相对位置;
}
跨度{
背景:url(“http://thecodeplayer.com/uploads/media/m1.png)无重复;
位置:绝对位置;
背景位置:底部;
顶部:0;底部:0;左侧:0;右侧:0;
高度:50px;
顶部:自动;
}
首先让我们了解什么是背景位置
:
background position属性用于设置背景的起始位置
背景图像
1.background position
是相对于图像而不是容器span
或父div
测量的
2.高度是从底部开始计算的,因为它是绝对定位的元素,而底部
是0。因此它被放置在其父div的底部
3.正如您将top
设为0一样,因此span
将粘贴到其父div
的top。因此,当您将top
值更改为auto时,它将粘贴到其父div
的底部Asbottom
的span
的定位与背景图像没有任何关系
我想通过我的实验澄清一件事:
1-背景位置是相对于设置了背景的容器测量的,它告诉图像它应该在容器中的位置。
2-这里的高度不是从图像的底部计算出来的,尽管它给人的错觉是从那里测量出来的。
我们在这里只给出容器跨度的高度,因为据说图像位于其父容器跨度的底部,这就是为什么在这里我们只能看到图像的底部,而使用top:auto,我们将span container推到其父div的底部。感谢您的澄清!还有一件事,假设我的html中只有一个元素,比如:lorem ipsum现在如果我将这个p标记的宽度和高度设置为200*200,那么我如何将我的文本移动到我想要的位置,假设底部居中,我不想使用文本对齐属性;对齐项目:柔性端;文本对齐:居中代码>