问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎么才能让一张图片铺满整个浏览器？

头像
吾曾今愛看武俠劇
    90613173266

    怎么才能让一张图片铺满整个浏览器？并且随浏览器的缩小而缩小，谢谢！
    clipboard.png

    htmlcss
    阅读 25.9k
    3 个回答
    得票最新
    头像
    ivanilla
      2.8k54053
      ✓ 已被采纳

      包你满意

      html, body
{
    margin: 0;
    padding: 0;
    background: url('images/background.png');
    repeat: no-repeat;
    background-attachment:fixed;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

      其中images/background.jpg是你的图片url。
      此代码兼容IE6/7/8/9以及所有现代浏览器。

      头像
      jackple
        83532945

        1,
        width: 100%;
        height: 100%;
        2,
        background: url(xxxx) cover;

        头像
        augu
          82
          <!DOCTYPE html>
<html lang = "en" >
<head >
    <meta charset = "UTF-8" >
    <title >Title</title >
    <style >
        html, body {
            margin: 0;
            padding: 0;
            background: url('images/bg.png') no-repeat fixed;
            background-size: cover;
            -moz-background-size: cover;
            -webkit-background-size: cover;
            /* IE6-9 */
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.png', sizingMethod=scale);
            -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.png', sizingMethod=scale);
            /*
            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：缩放图片以适应对象的尺寸边界。
            src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
            */
        }
    </style >
</head >
<body >
</body >
</html >

          AlphaImageLoader Filter

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题