css怎么让背景图全部铺满

html-css031

css怎么让背景图全部铺满,第1张

背景图全部铺满:background-size:100% 100%

如果不是纯色或者图片大小和要填充的盒子大小相差不大的时候,100%可以看到全图但是有时候会变形,建议不要使用100%;可以改用cover,cover是按比例放大,超出盒子部分裁剪,图片不会变形但是有时候不能完全看到全图

background: url(ab.gif) repeat //背景为ab.gif,横向、纵向平铺

① 如果是做网站的水印背景,可以放到body里,

② 如果是做页面的背景,放到最外层的div里,

比如:

① body{background: url(ab.gif) repeatmargin:0px auto}

② .box{background: url(ab.gif) repeatmargin:0px auto}

单纯横向平铺:repeat-x

单纯纵向平铺:repeat-y

不平铺:no-repeat

<style>

a{width:110pxheight:35pxline-height:35pxtext-align:centercolor:#0000background:#ff0000display:blockmargin-left:1pxfloat:left}

a:hover{width:110pxheight:35pxline-height:35pxtext-align:centercolor:#0000background:#00ff00display:blockmargin-left:1pxfloat:left}

</style>

<a href="#">百度</a><a href="#">百度</a><a href="#">百度</a>