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