背景图全覆盖技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37805490/article/details/78134743

我想做一个简单的网页，然而背景图片的处理过程并非自己想的那么easy。我采用的一张图片，大小并不合适，我想让这个图片完全铺满这个网页，并且随着网页可大可小。发现用了background-repeat并不管用，也用了width、height，都没有达到我的效果。最后我发现background-size cover;这个功能可以实现我想要的功能。它的意思是使背景图片铺满整个元素，且保证背景图片的宽高比。即当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小

或者是设定元素的宽高分别为背景图片的宽高，且设置margin-left为元素宽度的一半来使元素居中于屏幕。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bonnnie</title>
    <style>
        html, body{
            margin: 0;
            padding: 0;
            background-image:url(images/0.jpeg);
            background-repeat:no-repeat; 
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/0.jpeg', sizingMethod='scale');
            -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/0.jpeg', sizingMethod='scale');
            background-size: cover;
            -moz-background-size: cover;
            -webkit-background-size: cover;
            }  
    </style>
</head>
<body>
     <div>
        <a href="http://fanyi.youdao.com/" title="跳转到翻译网站" target="_blank">翻译</a>
     </div>
</body>
</html>

AlphaImageLoader：在元素的背景和内容之间插入一张图片，并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
            语法格式：

		filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
            	enabled：可选项，布尔值(Boolean)。设置或检索滤镜是否激活。 true：默认值。滤镜激活。 false：滤镜被禁止。
            	sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
           	        1）crop：剪切图片以适应对象尺寸。
           	 	2）image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
            		3）scale：缩放图片以适应对象的尺寸边界。

我这里只是粗略的了解，更多的并不了解，如若有更多更好的方法，希望多多指教。谢谢！