当我们的背景图片写成:

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

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

例:

#header {

width: 100%;

height: 400px;

border: 1px solid;

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

}

效果:

974f392230b6

1.png

如果背景图片写成:

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

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

974f392230b6

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

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐