css怎样让背景图片居中,CSS让背景图片居中显示的方法

当我们的背景图片写成:

background: url("images/titleborder.png") no-repeat;

时,表示背景图片不重复,位置会默认为在div中居于左上角。

例:

#header {

width: 100%;

height: 400px;

border: 1px solid;

background: url("images/titleborder.png") no-repeat;

}

效果:

974f392230b6?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

1.png

如果背景图片写成:

background: url("images/titleborder.png") center center no-repeat;

效果是水平垂直居中对齐:

974f392230b6?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

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;

974f392230b6?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

P9_3E4$9[Q4F0EL}9%]R32A.png