html 背景图片居中显示,CSS让背景图片居中显示的方法
当我们的背景图片写成:background: url("images/titleborder.png") no-repeat;时,表示背景图片不重复,位置会默认为在div中居于左上角。例:#header {width: 100%;height: 400px;border: 1px solid;background: url("images/titleborder.png") no-repeat;}
当我们的背景图片写成:
background: url("images/titleborder.png") no-repeat;
时,表示背景图片不重复,位置会默认为在div中居于左上角。
例:
#header {
width: 100%;
height: 400px;
border: 1px solid;
background: url("images/titleborder.png") no-repeat;
}
效果:
1.png
如果背景图片写成:
background: url("images/titleborder.png") center center no-repeat;
效果是水平垂直居中对齐:
2.png
第一个center表示水平居中,第二个center表示垂直居中。
要令背景图片水平居中,并贴近div顶部,代码可以这么写:
background: url("images/titleborder.png") center 0 no-repeat;
或者:
background: url("images/titleborder.png") center top no-repeat;
效果:
令背景图片居于右上角的写法:
background: url("images/titleborder.png") right top no-repeat;
效果:
左居中:
background: url("images/titleborder.png") left center no-repeat;
P9_3E4$9[Q4F0EL}9%]R32A.png
更多推荐
所有评论(0)