当前位置: 首页 > 前端笔记 > CSS > 让前端泪流满面的的CSS3-background-size
2014年20八月

让前端泪流满面的的CSS3-background-size

还记不记得,在一个框内让图片垂直居中显示,vertical-align:middle无效,顺便说一句我到现在都没有搞明白vertical-align:middle可以用来做什么?还有两种蛋疼的解决方式,把图放在table里面,怎么看怎么挫,然后就是用JS来计算,这个更挫。如果你没有经历过这种痛苦,那么你证明你还很年轻,莫斯科不相信眼泪。

让前端泪流满面的的CSS3-background-size.jpg

演示一,把整个图添进去,明显看出图片变形了!

.demo1 { width:296px; height:230px; border:1px #444444 solid; background:url(/d/file/notes/css/2014-08-20/bf20313d446f6b9cd1b63be645ed24b9.jpg) no-repeat 0 0; background-size:296px 230px; }

演示二,把整个图添进去,明显看出图片被裁切了!

.demo2 { width:296px; height:230px; border:1px #444444 solid; background:url(/d/file/notes/css/2014-08-20/bf20313d446f6b9cd1b63be645ed24b9.jpg) no-repeat 0 0; background-size:cover; }

演示三,把整个图添进去,明显看出图片缩放了,居中了!

.demo3 { width:296px; height:230px; border:1px #444444 solid; background:url(/d/file/notes/css/2014-08-20/bf20313d446f6b9cd1b63be645ed24b9.jpg) no-repeat center center; background-size:contain; }

演示四,把整个图添进去,缩放成指定大小,居中了!

.demo4 { width:296px; height:230px; border:1px #444444 solid; background:url(/d/file/notes/css/2014-08-20/bf20313d446f6b9cd1b63be645ed24b9.jpg) no-repeat center center; background-size:180px 180px; }

演示五,显示指定区域!

.demo5 { width:296px; height:230px; border:1px #444444 solid; background:url(/d/file/notes/css/2014-08-20/bf20313d446f6b9cd1b63be645ed24b9.jpg) no-repeat -112px -90px; }

演示六,让妹子漂亮起来!

.demo6 { width:500px; height:500px; border:1px #444444 solid; background:url(/d/file/notes/css/2014-08-20/08573d2cb5b217dd794fc271a760758a.jpg) no-repeat 0 0; }

文章信息

  • 发布日期:2014年08月20日 14:08:55
  • 固定地址:http://www.estorm.cn/notes/css/2014-08-20/css3-background-size.html