背景图片铺满屏幕-------Day85

Posted 2020-09-18 ljbguanli

你有没有遇到过一种情况，你特别喜欢一张图片，可是可惜的是这张图片就小了那么一丁点。但有小片留白啊，那就不好看了啊。你有没有过呢，我不知道，但我真的就碰到了。我特喜欢那张图，就想让它做背景，可就小了点。于是我就想办法了。

background-size：cover；

background-size：contain。

两个看起来几乎相同，实际原理还真不一样：

cover。翻译过来就是“覆盖”，这是纯正的背景铺满了元素，它会比較图片的长和宽。哪一个比較小，它就以哪一个为基准进行扩大。图片的本身宽高比例是不变的，当增大到比較小的值铺满对应方向的屏幕了才截止；

contain：翻译过来是“包括”，这个是说整个背景都在页面内，一般图片过大了才会用。跟size同样的是，本身的宽高比是不变的。而不用的则是它取的是两者中比較大的一个，以其为基准进行缩小。小到比較大的一方进入屏幕才截止；

当然在ie下，还有这经典的滤镜，这个暂没试用。我就分享下别人写的代码吧。

filter: progid:DXImageTransform
.Microsoft.AlphaImageLoader
(src=‘.myBackground.jpg‘, 
sizingMethod=‘scale‘);

这样图片仅仅要相差不是太离谱，想用哪个用哪个嘛