当我们的背景图片写成:

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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐