css如何设置图片居中偏下

Posted 2023-04-06

如何将背景图片在页面中贴底部边并居中呢

你需要用到background-position这个属性，用以规定背景图片的位置。让图片居中偏下的代码为：

background-positon:center bottom; 或 background-positon:bottom;

全部的位置代码如下：

background-position: left;  代表背景图横向（X轴）靠左，纵向（Y轴）居中。（9点钟位置）

background-position: right;  代表背景图横向（X轴）靠右，纵向（Y轴）居中。（3点钟位置）

background-position: top;  代表背景图横向（X轴）居中，纵向（Y轴）靠上。（12点钟位置）

background-position: bottom;  代表背景图横向（X轴）居中，纵向（Y轴）靠下。（6点钟位置）

background-position: center;  代表背景图横向（X轴）居中，纵向（Y轴）居中。（绝对居中）

background-position: left top;  代表背景图横向（X轴）靠左，纵向（Y轴）靠上。（10点钟位置）

background-position: left bottom;  代表背景图横向（X轴）靠左，纵向（Y轴）靠下。（7点钟位置）

background-position: right top;  代表背景图横向（X轴）靠右，纵向（Y轴）靠上。（1点钟位置）

background-position: right bottom;  代表背景图横向（X轴）靠右，纵向（Y轴）靠下。（5点钟位置）

参考技术A background：.enter bottom no-repeat;前面是url路径
全部的位置代码如下：

background-position: left; 代表背景图横向（X轴）靠左，纵向（Y轴）居中。（9点钟位置）
background-position: right; 代表背景图横向（X轴）靠右，纵向（Y轴）居中。（3点钟位置）
background-position: top; 代表背景图横向（X轴）居中，纵向（Y轴）靠上。（12点钟位置）
background-position: bottom; 代表背景图横向（X轴）居中，纵向（Y轴）靠下。（6点钟位置）
background-position: center; 代表背景图横向（X轴）居中，纵向（Y轴）居中。（绝对居中）
background-position: left top; 代表背景图横向（X轴）靠左，纵向（Y轴）靠上。（10点钟位置）
background-position: left bottom; 代表背景图横向（X轴）靠左，纵向（Y轴）靠下。（7点钟位置）
background-position: right top; 代表背景图横向（X轴）靠右，纵向（Y轴）靠上。（1点钟位置）
background-position: right bottom; 代表背景图横向（X轴）靠右，纵向（Y轴）靠下。（5点钟位置） 参考技术B position:absolute;bottom:0px;left:45%; 参考技术C background：..............center bottom no-repeat;前面是url路径

Css中Position定位详解

参考技术A Position属性确认元素的定位

static 是默认定位值，它的定位元素不受top、left、right、bottom的影响，也就是说你给元素设置这四个属性的任何值都没有效果

relative 相对定位，设置相对定位元素的top、left、right、bottom会使当前元素相对于当前位置做一定的偏移。

比如说在做表单布局的时候，有时候label的值并没有和输入框上下居中对齐，它有一点点偏下，效果不是很好看，这个时候我们可以给label向上设置一下偏移让他们居中对齐

absolute 是绝对定位，绝对定位的元素相对于最近的定位祖先元素进行定位，如果没有定位祖先元素，那么就按body定位

absolute最典型的例子就是结合relative一块完成效果，比如我有一个p，它是在页面居中的，但是它的宽度和高度是动态的，我们还有一个span标签希望永远在这右下角10px的位置，这个时候我们就可以利用absolute完成

fixed 是相对视口定位的，简称浮云定位，这个意味着就像你滚动页面，它始终位于同一个位置，top、left、right、bottom用于设置当前元素的位置。

常用的例子就是页面右下角，滚动到顶部的的功能，我们可以对这个元素设置fixed浮动定位，当用户一直向下滚动浏览网页后，想一下子回到顶部，它只要点这个元素就行了，因为之个元素是浮云定位，所以永远是在用户可视范围的右下角