背景图片、完全填充、相关css/ div里的img图片水平垂直居中

 

background：

background: #00FF00 url(bgimage.gif) no-repeat fixed top;

1、背景图片知识点：

background-image:使用的背景图像
background-color:背景颜色
background-repeat:如何重复背景图像，no-repeat 背景图像将仅显示一次，repeat 默认将在垂直方向和水平方向重复，repeat-x，repeat-y.

background-color:
background-image:  url(path) 
background-repeat: repeat/no-repeat/repeat-x/repeat-y

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment: fixed/scroll;

2、位置和大小

background-position 属性设置背景图像的起始位置

background-position: 

background-size: length|percentage|cover|contain;
background-size:100% 100%

length：第一个值设置宽度，第二个值设置高度。cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

想让背景图片完全填充div，就是背景图片进行拉伸完全填充div的四个边框，可以设置百分比100%。

 

---

div里的img图片水平垂直居中

方法1：通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半。

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -25px; /* 高度的一半 */
        margin-left: -25px; /* 宽度的一半 */
    }
</style>

方法2：还是通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半，如果不知道元素的宽高，可以用transform: translate(-50%,-50%);
 

transform: translate(-50%,-50%);

方法3：弹性布局flex